[LiveComponent] <textarea> not updated

[JorickPepin]

Hello, I'm experiencing a strange behavior when trying to display my dynamic content in a <textarea>. When my function returns an empty string at the start, I get the impression that the content isn't injected into the DOM if I put it in a <textarea>, but that it works if it's in a <div>.

I tried to make a simple reproducer where we retrieve the content of a <textarea> to display it in another one by applying some processing. The content doesn't seem to appear in the DOM if the first iteration of this processing returns an empty string. Don't hesitate if you need more details.

The LiveComponent:

#[AsLiveComponent]
class TestComponent extends AbstractController
{
    use ComponentWithFormTrait;
    use DefaultActionTrait;

    public array $initialFormData = [
        'editor' => '',
    ];

    public function getUpdatedText(): string
    {
        $data = $this->getForm()->getData();

        return $data['editor']; // does not appear in the DOM
        // return $data['editor'] . ' updated'; // appears in the DOM
    }

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(
            TestType::class, $this->initialFormData
        );
    }
}

The FormType:

class TestType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('editor', TextareaType::class, [
                'label' => false,
                'trim' => false,
            ]);
        ;
    }
}

The template:

<div {{ attributes }}>
    {{ form_start(form) }}
        {{ form_row(form.editor) }}
        <textarea>{{ this.updatedText }}</textarea>
        <div>{{ this.updatedText }}</div>
    {{ form_end(form) }}
</div>

Screens:

[weaverryan]

This looks super weird - smells like a bug, though I can’t imagine from what. I’ll see if I can take a look into it

[weaverryan]

Hi!

So, I can't reproduce this! It works fine for me - but on Chrome and Firefox. Here is the reproducer based on your code above - https://github.com/weaverryan/live-components-textaera-reproducer

To be clear, using either return statement in getUpdatedText(), if I typed into the top textarea (the one coming from the actual form object), both the textarea below and the div are updated. It IS true that, the inspect, it appears like the textarea is still empty:

I believe the innerHTML basically functions as the initial value of the textarea. But after, if you set the .value (as we do in Live Components), it updates the value, but not the innerHTML. But this isn't a detail that you should care about: the value of the textarea IS correctly set.

The only thing I noticed is that the getUpdatedText() method needs to allow for null to be returned, as this is what is returned if you empty the textbox:

- public function getUpdatedText(): string
+ public function getUpdatedText(): ?string

Cheers!