fix: set value attribute on textarea instead of in content to ensure value and defaultValue stay in sync with changes

.changeset/spotty-lamps-shake.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/ember-toucan-core': patch
+---
+
+Update Textarea to ensure underlying <textarea> value stays in sync with both typing and @value changes

packages/ember-toucan-core/src/components/form/controls/textarea.gts

@@ -80,7 +80,8 @@ export default class ToucanFormTextareaControlComponent extends Component<Toucan
         readonly={{@isReadOnly}}
         ...attributes
         {{on "input" this.handleInput}}
-      >{{@value}}</textarea>
+        value={{@value}}
+      ></textarea>
     </div>
   </template>
 }

test-app/tests/integration/components/textarea-test.gts

@@ -1,9 +1,11 @@
 /* eslint-disable no-undef -- Until https://github.com/ember-cli/eslint-plugin-ember/issues/1747 is resolved... */
-import { fillIn, render } from '@ember/test-helpers';
+import { fillIn, render, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
 import TextareaControl from '@crowdstrike/ember-toucan-core/components/form/controls/textarea';
 import { setupRenderingTest } from 'test-app/tests/helpers';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 module('Integration | Component | Textarea', function (hooks) {
   setupRenderingTest(hooks);
@@ -78,6 +80,60 @@ module('Integration | Component | Textarea', function (hooks) {
     assert.dom('[data-textarea]').hasValue('tony');
   });
 
+  test('it keeps the <textarea> value in sync with external changes to `@value`', async function (assert) {
+    class TestContext {
+      @tracked testValue;
+    }
+    const testContext = new TestContext();
+    testContext.testValue = 'initial';
+
+    await render(<template>
+      {{! we do not require a label, but instead suggest using Field / TextareaField }}
+      {{! template-lint-disable require-input-label }}
+      <TextareaControl @value={{testContext.testValue}} data-textarea />
+    </template>);
+
+    assert.dom('[data-textarea]').hasValue('initial');
+
+    testContext.testValue = 'updated';
+
+    await settled();
+
+    assert.dom('[data-textarea]').hasValue('updated');
+  });
+
+  test('it keeps the <textarea> value in sync with external changes to `@value` after the value is changed', async function (assert) { 
+    class TestContext {
+      @tracked testValue;
+
+      @action
+      updateTestValue(value, e) {
+        this.testValue = value;
+      }
+    }
+    const testContext = new TestContext();
+    testContext.testValue = 'initial';
+
+    await render(<template>
+      {{! we do not require a label, but instead suggest using Field / TextareaField }}
+      {{! template-lint-disable require-input-label }}
+      <TextareaControl @value={{testContext.testValue}} @onChange={{testContext.updateTestValue}} data-textarea />
+    </template>);
+
+    assert.dom('[data-textarea]').hasValue('initial');
+
+    await fillIn('[data-textarea]', 'test');
+
+    assert.dom('[data-textarea]').hasValue('test');
+
+    testContext.testValue = 'updated';
+
+    await settled();
+
+    assert.dom('[data-textarea]').hasValue('updated');
+  });
+
+
   test('it calls `@onChange` when input is received', async function (assert) {
     assert.expect(6);