From b89ee673e6698325adf71a9103cd100ac58ac146 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 29 Jan 2025 17:57:16 -0500
Subject: [PATCH] Fix `<wa-textarea>` form submit behavior (#637)

* fix textarea form submit behavior

* add test
---
 docs/docs/components/textarea.md         |  6 +++++-
 docs/docs/resources/changelog.md         |  1 +
 src/components/textarea/textarea.test.ts | 15 +++++++++++++++
 src/components/textarea/textarea.ts      |  6 +++---
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index c86c7dd24..7af557eba 100644
--- a/docs/docs/components/textarea.md
+++ b/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
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 8ed6d487b..fa5919efd 100644
--- a/docs/docs/resources/changelog.md
+++ b/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
 
diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts
index b5339e8f5..cc135c21f 100644
--- a/src/components/textarea/textarea.test.ts
+++ b/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>
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index cb2c3a1b1..d92c6dc7a 100644
--- a/src/components/textarea/textarea.ts
+++ b/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;
     }