Multiline strings displaying with carriage in textarea elements

[dzenreda]

Hello,

I found that in HTML textarea elements, when writing multiline text, show texts with a horizontal whitespace for every line after the first one.
This is happening only when loading text, not at the time of writing it. I realised that it is only happening if the textarea is inside a partial template and the displayed text is passed as an attribute.

In my case, I have a form with a field description that is a multiline text.

form.handlebars

{{> components/center-info name=center.name description=center.description }}

components/center-info.handlebars

<section class="form-group mb-4">
    <label for="center-name" class="block text-gray-700 font-medium">Nombre de la Centro</label>
    <input id="center-name" name="name" type="text" value="{{name}}" required autofocus
        class="mt-1 block w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
</section>

<section class="form-group mb-4">
    <label for="center-description" class="block text-gray-700 font-medium mb-1">Descripción</label>
    <textarea id="center-description" name="description" rows="4" required
        class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">{{description}}</textarea>
</section>

For instance, for a string like this

aaaaa\r\n\r\na

The representation in the textarea inside the components/center-info.handlebars is this

However, if I place the textarea outside the component, i.e. in the form.handlebars template, it display the string correctly

I think this might be related with the parsing of the attribute 🤔

Thanks

[jaylinski]

Handlebars doesn't parse HTML. Did you check out the documentation on whitespace-control?

Here's an example: https://handlebarsjs.com/playground.html#format=1&currentExample=%7B%22template%22%3A%22Identation%20test%20for%20partials%3A%20%5Cn%20%20%7B%7B~%3E%20myPartial%20text%3Dtext%20%7D%7D%22%2C%22partials%22%3A%5B%7B%22name%22%3A%22myPartial%22%2C%22content%22%3A%22%5Cn%7B%7B%20text%20%7D%7D%22%7D%5D%2C%22input%22%3A%22%7B%5Cn%20%20text%3A%20%5C%22foo%5C%5Cnbar%5C%22%2C%5Cn%7D%5Cn%22%2C%22output%22%3A%22Identation%20test%20for%20partials%3A%5Cnfoo%5Cnbar%22%2C%22preparationScript%22%3A%22%2F%2F%20Handlebars.registerHelper('loud'%2C%20function(string)%20%7B%5Cn%2F%2F%20%20%20return%20string.toUpperCase()%5Cn%2F%2F%20%7D)%3B%5Cn%22%2C%22handlebarsVersion%22%3A%224.7.8%22%7D