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

[speedytwenty]

Thanks a ton, @jaylinski! Had been struggling with this from different angles. The documentation regarding white-space control didn't reveal the solution—but your example did.

Prefixing the partial's implementation with ~ did the trick!

Eg.

{{~> myPartial text=text }}

Repost: Originally posted erroneously as an answer

[dzenreda]

Oh, ok! Now I understood @jaylinski answer.
So the issue is that the whitespace is produced by the indentation that precedes the partial reference, in the HTML template itself. Adding the ~ character removes it. It is confusing because the whitespace only appears with the presence of newlines (\n).
I didn't know Handlebars worked that way.
Thank you

[dzenreda]

No HTML is being parsed. This is a simple multiline string, created in the first place by the same textarea input. The issue I'm noticing is that it is not displayed correctly if the textarea input is in a partial template. I would like to verify this issue to rule out the possibility that I'm doing something wrong with that string.