fix(textarea): update element internals on load, value change, disabled and required change

brandyscarney · brandyscarney · commit 0e4dee81c6ae · 2025-11-19T15:33:54.000-05:00
diff --git a/core/src/components/textarea/test/form/index.html b/core/src/components/textarea/test/form/index.html
@@ -12,6 +12,17 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      .required-label {
+        display: none;
+      }
+
+      .textarea-required .required-label {
+        display: inline;
+        color: red;
+      }
+    </style>
   </head>
 
   <body>
@@ -26,32 +37,41 @@
         <form onsubmit="return onSubmit(event)">
           <ion-textarea
             fill="outline"
-            label="Label"
             label-placement="stacked"
             placeholder="Placeholder"
             helper-text="Helper message"
             counter="true"
             maxlength="999"
-            required
           >
+            <div slot="label">Label <span class="required-label">(Required) *</span></div>
             <ion-icon slot="end" name="square-outline"></ion-icon>
           </ion-textarea>
 
           <p>
-            Clicking the button below should show a popup saying textarea is required in Chrome, Safari, and Firefox
-            when the textarea is empty.
+            Click the first button below to toggle the required prop and then click the submit button to attempt to
+            submit the form. It should show a popup warning to fill out the field when textarea is required and empty.
+            When the textarea is not required, or the field is filled, the form should submit by sending a console log.
           </p>
-          <button>Submit</button>
+          <button type="button" onClick="toggleRequired()">Toggle Required</button>
+          <button type="submit">Submit</button>
         </form>
       </ion-content>
     </ion-app>
 
     <script>
       function onSubmit(event) {
         event.preventDefault();
-        console.log('Form submitted');
+        const textarea = document.querySelector('ion-textarea');
+        console.log('Form submitted with value:', textarea.value);
         return true;
       }
+
+      function toggleRequired() {
+        const textarea = document.querySelector('ion-textarea');
+        textarea.required = textarea.required ? false : true;
+        textarea.classList.toggle('textarea-required', textarea.required);
+        console.log('Textarea required set to:', textarea.required);
+      }
     </script>
   </body>
 </html>
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
@@ -149,6 +149,11 @@ export class Textarea implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  @Watch('disabled')
+  protected disabledChanged() {
+    this.updateElementInternals();
+  }
+
   /**
    * The fill for the item. If `"solid"` the item will have a background. If
    * `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
@@ -300,16 +305,23 @@ export class Textarea implements ComponentInterface {
     if (nativeInput && nativeInput.value !== value) {
       nativeInput.value = value;
     }
+    this.updateElementInternals();
     this.runAutoGrow();
-    this.reportValidity();
   }
 
   /**
    * Update validation state when required prop changes
    */
   @Watch('required')
   protected requiredChanged() {
-    this.reportValidity();
+    // Explicitly update the native element's required attribute to ensure
+    // browser validation works correctly when required changes dynamically.
+    // While the template binding should handle this, we need to update it
+    // synchronously for the browser's validation to recognize the change.
+    if (this.nativeInput) {
+      this.nativeInput.required = this.required;
+    }
+    this.updateElementInternals();
   }
 
   /**
@@ -454,8 +466,8 @@ export class Textarea implements ComponentInterface {
 
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
+    this.updateElementInternals();
     this.runAutoGrow();
-    this.reportValidity();
   }
 
   componentDidRender() {
@@ -578,11 +590,16 @@ export class Textarea implements ComponentInterface {
   }
 
   /**
-   * Reports the validity state to the browser via ElementInternals.
-   * This delegates to the native textarea's built-in validation,
-   * which automatically handles the required prop and other constraints.
+   * Updates the form value and reports validity state to the browser via
+   * ElementInternals. This should be called when the component loads, when
+   * the required prop changes, when the disabled prop changes, and when the value
+   * changes to ensure the form value stays in sync and validation state is updated.
    */
-  private reportValidity() {
+  private updateElementInternals() {
+    // Disabled form controls should not be included in form data
+    // Pass null to setFormValue when disabled to exclude it from form submission
+    const value = this.disabled ? null : this.getValue();
+    this.internals.setFormValue(value);
     reportValidityToElementInternals(this.nativeInput, this.internals);
   }
 
@@ -600,11 +617,6 @@ export class Textarea implements ComponentInterface {
   };
 
   private onChange = (ev: Event) => {
-    const input = ev.target as HTMLTextAreaElement | null;
-    if (input) {
-      this.internals.setFormValue(input.value);
-      this.reportValidity();
-    }
     this.emitValueChange(ev);
   };
 
