fix(web-components): TextArea auto-resize moves instead of grows in Firefox (#35849)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Martin Hochel <martinhochel@microsoft.com>

Author: Copilot

change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): resolve auto-resize issues for TextArea in Firefox",
+  "packageName": "@fluentui/web-components",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/api-report.md

@@ -833,6 +833,8 @@ export class BaseTextArea extends FASTElement {
     // (undocumented)
     protected readOnlyChanged(): void;
     reportValidity(): boolean;
+    // @internal
+    rootEl: HTMLDivElement;
     required: boolean;
     // (undocumented)
     protected requiredChanged(): void;

packages/web-components/docs/web-components.api.md

@@ -867,6 +867,8 @@ export class BaseTextArea extends FASTElement {
     resize: TextAreaResize;
     // (undocumented)
     protected resizeChanged(prev: TextAreaResize | undefined, next: TextAreaResize | undefined): void;
+    // @internal
+    rootEl: HTMLDivElement;
     select(): void;
     setCustomValidity(message: string | null): void;
     // @internal

packages/web-components/src/textarea/textarea.base.ts

@@ -40,6 +40,12 @@ export class BaseTextArea extends FASTElement {
    */
   public labelEl!: HTMLLabelElement;
 
+  /**
+   * The root container element.
+   * @internal
+   */
+  public rootEl!: HTMLDivElement;
+
   /**
    * The `<textarea>` element.
    * @internal
@@ -587,7 +593,10 @@ export class BaseTextArea extends FASTElement {
       this.autoSizerEl.classList.add('auto-sizer');
       this.autoSizerEl.ariaHidden = 'true';
     }
-    this.shadowRoot!.prepend(this.autoSizerEl);
+    // `rootEl` uses optional chaining because `autoResizeChanged` may be called before
+    // the element connects and the template renders. `connectedCallback` will call this
+    // method again once `rootEl` is available.
+    this.rootEl?.prepend(this.autoSizerEl);
 
     // The `ResizeObserver` is used to observe when the component gains
     // explicit block size, when so, the `autoSizerEl` element should be

packages/web-components/src/textarea/textarea.spec.ts

@@ -138,6 +138,46 @@ test.describe('TextArea', () => {
       await expect(element).not.toHaveAttribute('auto-resize');
     });
 
+    test('should place the auto-sizer element inside the root element when `field-sizing: content` is not supported', async ({
+      fastPage,
+      page,
+    }) => {
+      const { element } = fastPage;
+
+      // Mock CSS.supports to simulate a browser that doesn't support `field-sizing: content` (e.g. Firefox)
+      // and restore it after to avoid affecting subsequent tests
+      await page.evaluate(() => {
+        const originalSupports = CSS.supports.bind(CSS);
+        (window as Window & { __originalCSSSupports?: typeof CSS.supports }).__originalCSSSupports = originalSupports;
+        CSS.supports = (property: string, value?: string) => {
+          if (property === 'field-sizing: content' || (property === 'field-sizing' && value === 'content')) {
+            return false;
+          }
+          return originalSupports(property, value as string);
+        };
+      });
+
+      try {
+        await fastPage.setTemplate({ attributes: { 'auto-resize': true } });
+
+        const autoSizerIsInsideRoot = await element.evaluate((node: TextArea) => {
+          const root = node.shadowRoot?.querySelector('.root');
+          return root?.contains(node.autoSizerEl ?? null) ?? false;
+        });
+
+        expect(autoSizerIsInsideRoot).toBe(true);
+      } finally {
+        // Restore the original CSS.supports to avoid affecting other tests
+        await page.evaluate(() => {
+          const w = window as Window & { __originalCSSSupports?: typeof CSS.supports };
+          if (w.__originalCSSSupports) {
+            CSS.supports = w.__originalCSSSupports;
+            delete w.__originalCSSSupports;
+          }
+        });
+      }
+    });
+
     test('should toggle block attribute', async ({ fastPage }) => {
       const { element } = fastPage;
 

packages/web-components/src/textarea/textarea.template.ts

@@ -12,7 +12,7 @@ export function textAreaTemplate<T extends TextArea>(): ElementViewTemplate<T> {
       <label ${ref('labelEl')} for="control" part="label">
         <slot name="label" ${slotted('labelSlottedNodes')}></slot>
       </label>
-      <div class="root" part="root">
+      <div class="root" part="root" ${ref('rootEl')}>
         <textarea
           ${ref('controlEl')}
           id="control"