Fix <wa-textarea> form submit behavior (#637)

* fix textarea form submit behavior

* add test

docs/docs/components/textarea.md

@@ -7,7 +7,11 @@ native: input
 ---
 
 ```html {.example}
-<wa-textarea></wa-textarea>
+<form action="about:blank" target="_blank">
+  <wa-textarea label="Type something', will ya" name="a" value="no"></wa-textarea>
+
+  <button type="submit">Submit</button>
+</form>
 ```
 
 :::info

docs/docs/resources/changelog.md

@@ -23,6 +23,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added the `orientation` attribute to `<wa-radio-group>` to support vertical and horizontal radio items
 - Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
 - Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
+- Fixed a bug in `<wa-textarea>` that caused empty controls to submit a value if the initial value was deleted a certain way
 
 ## 3.0.0-alpha.9
 

src/components/textarea/textarea.test.ts

@@ -199,6 +199,21 @@ describe('<wa-textarea>', () => {
       });
 
       describe('when submitting a form', () => {
+        it('should submit an empty value when initial value is set and then deleted', async () => {
+          const form = await fixture<HTMLFormElement>(html`
+            <form><wa-textarea name="a" value="1"></wa-textarea></form>
+          `);
+          const textarea = form.querySelector('wa-textarea')!;
+
+          textarea.focus();
+          textarea.select();
+          await sendKeys({ press: 'Backspace' });
+          await textarea.updateComplete;
+
+          const formData = new FormData(form);
+          expect(formData.get('a')).to.equal('');
+        });
+
         it('should serialize its name and value with FormData', async () => {
           const form = await fixture<HTMLFormElement>(html`
             <form><wa-textarea name="a" value="1"></wa-textarea></form>

src/components/textarea/textarea.ts

@@ -63,7 +63,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   /** The name of the textarea, submitted as a name/value pair with form data. */
   @property({ reflect: true }) name: string | null = null;
 
-  private _value: string = '';
+  private _value: string | null = null;
 
   /** The current value of the input, submitted as a name/value pair with form data. */
   get value() {
@@ -71,11 +71,11 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
       return this._value;
     }
 
-    return this._value || this.defaultValue;
+    return this._value ?? this.defaultValue;
   }
 
   @state()
-  set value(val: string) {
+  set value(val: string | null) {
     if (this._value === val) {
       return;
     }