feat(textarea): add workaround for dynamic slot content (#27661)

Author: liamdebeasi

core/src/components/textarea/test/label-placement/textarea.e2e.ts

@@ -240,3 +240,30 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: async label'), () => {
+    test('textarea should re-render when label slot is added async', async ({ page }) => {
+      await page.setContent(
+        `
+            <ion-textarea fill="solid" label-placement="stacked" placeholder="Text Input"></ion-textarea>
+          `,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+
+      await textarea.evaluate((el: HTMLIonInputElement) => {
+        const labelEl = document.createElement('div');
+        labelEl.slot = 'label';
+        labelEl.innerHTML = 'Comments <span class="required" style="color: red">*</span';
+
+        el.appendChild(labelEl);
+      });
+
+      await page.waitForChanges();
+
+      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-async-label`));
+    });
+  });
+});

core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Chrome-linux.png

@@ -91,8 +91,49 @@ <h2>Outline / Floating</h2>
               <div slot="label">Email <span class="required">*</span></div>
             </ion-textarea>
           </div>
+
+          <div class="grid-item">
+            <h2>Outline / Floating / Async</h2>
+            <ion-textarea id="solid-async" label-placement="floating" fill="outline" value="[email protected]"></ion-textarea>
+          </div>
         </div>
+
+        <ion-button onclick="addSlot()">Add Slotted Content</ion-button>
+        <ion-button onclick="updateSlot()">Update Slotted Content</ion-button>
+        <ion-button onclick="removeSlot()">Remove Slotted Content</ion-button>
       </ion-content>
     </ion-app>
+
+    <script>
+      const solidAsync = document.querySelector('#solid-async');
+
+      const getSlottedContent = () => {
+        return solidAsync.querySelector('[slot="label"]');
+      };
+
+      const addSlot = () => {
+        if (getSlottedContent() === null) {
+          const labelEl = document.createElement('div');
+          labelEl.slot = 'label';
+          labelEl.innerHTML = 'Comments <span class="required">*</span>';
+
+          solidAsync.appendChild(labelEl);
+        }
+      };
+
+      const removeSlot = () => {
+        if (getSlottedContent() !== null) {
+          solidAsync.querySelector('[slot="label"]').remove();
+        }
+      };
+
+      const updateSlot = () => {
+        const slottedContent = getSlottedContent();
+
+        if (slottedContent !== null) {
+          slottedContent.textContent = 'This is my really really really long text';
+        }
+      };
+    </script>
   </body>
 </html>

core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-async-label-md-ltr-Mobile-Firefox-linux.png

@@ -1,10 +1,25 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import {
+  Build,
+  Component,
+  Element,
+  Event,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+  forceUpdate,
+  h,
+  writeTask,
+} from '@stencil/core';
 import type { LegacyFormController, NotchController } from '@utils/forms';
 import { createLegacyFormController, createNotchController } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
+import { createSlotMutationController } from '@utils/slot-mutation-controller';
+import type { SlotMutationController } from '@utils/slot-mutation-controller';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -42,6 +57,8 @@ export class Textarea implements ComponentInterface {
   private legacyFormController!: LegacyFormController;
   private notchSpacerEl: HTMLElement | undefined;
 
+  private slotMutationController?: SlotMutationController;
+
   private notchController?: NotchController;
 
   // This flag ensures we log the deprecation warning at most once.
@@ -295,6 +312,7 @@ export class Textarea implements ComponentInterface {
   connectedCallback() {
     const { el } = this;
     this.legacyFormController = createLegacyFormController(el);
+    this.slotMutationController = createSlotMutationController(el, 'label', () => forceUpdate(this));
     this.notchController = createNotchController(
       el,
       () => this.notchSpacerEl,
@@ -320,6 +338,11 @@ export class Textarea implements ComponentInterface {
       );
     }
 
+    if (this.slotMutationController) {
+      this.slotMutationController.destroy();
+      this.slotMutationController = undefined;
+    }
+
     if (this.notchController) {
       this.notchController.destroy();
       this.notchController = undefined;