Textarea value gets decoupled from what's displayed when updating @value after typing in textarea

[kmillns]

When using Form::Controls::Textarea and you type in the textarea the value and defaultValue of the underlying textarea get out of sync with each other, so further updates to @value update the defaultValue but the value isn't updated and the textarea doesn't visually update.

This appears to be because the @value set up like <textarea>{{@value}}</textarea> which is technically setting the defaultValue rather than setting the value property like <textarea value={{@value}}>

Relevant snippet from MDN

The <textarea> element specifies its content differently in HTML and JavaScript contexts:

• In HTML, the initial content of a <textarea> is specified between its opening and closing tags, not as a value attribute.
• In JavaScript, <textarea> elements have a value property that can be used to get or set the current content, and defaultValue to get and set its initial value (equivalent to accessing the HTML element's text content).

Example of the problem

export default class ExampleComponent extends Component {
  @tracked fooBar = 'foobar';

  @action
  updateFooBar(value, e) {
    console.log({ e, value });
    this.fooBar = value;
  }

  @action
  repeatFooBar() {
    console.log('repeat');
    this.fooBar = this.fooBar + 'fooBar';
  }
}

  <span>{{this.fooBar}}</span>
  <Form::Controls::Textarea
    @name={{this.fooBar}}
    class="font-monospace type-md"
    @label="foobar"
    @value={{this.fooBar}}
    @onChange={{this.updateFooBar}}
  />
  <button type="button" {{on "click" this.repeatFooBar}}>Repeat</button>

Steps:

1. Click "Repeat" - this correctly appends to the textarea contents
2. Type in the textarea - this correctly updates
3. Click "Repeat" again - note that it no longer updates the textarea contents
4. Inspect the textarea and check .value and .defaultValue