From 4d85e7ccab706afe31a6a5e3ca3f9b8c0f8be870 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 10:43:08 +0000
Subject: [PATCH 1/6] Initial plan


From 9a62abb5c1f55d9531c85954ff2b2cc9b50e4ba6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 10:57:11 +0000
Subject: [PATCH 2/6] Fix TextArea AutoResize not working on Firefox by placing
 auto-sizer inside root element

Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>
---
 packages/web-components/docs/api-report.md    |  2 +
 .../src/textarea/textarea.base.ts             | 11 ++++-
 .../src/textarea/textarea.spec.ts             | 40 +++++++++++++++++++
 .../src/textarea/textarea.template.ts         |  2 +-
 4 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index a4b8335c634f7c..7e4f875b628f01 100644
--- a/packages/web-components/docs/api-report.md
+++ b/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;
diff --git a/packages/web-components/src/textarea/textarea.base.ts b/packages/web-components/src/textarea/textarea.base.ts
index f626fc17495541..0bdf3014301bac 100644
--- a/packages/web-components/src/textarea/textarea.base.ts
+++ b/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
diff --git a/packages/web-components/src/textarea/textarea.spec.ts b/packages/web-components/src/textarea/textarea.spec.ts
index 6b7d1c8165fd73..26d5d9dae3d72d 100644
--- a/packages/web-components/src/textarea/textarea.spec.ts
+++ b/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) ?? 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;
 
diff --git a/packages/web-components/src/textarea/textarea.template.ts b/packages/web-components/src/textarea/textarea.template.ts
index 6f6ee552f52dbc..f8bf158c9912cc 100644
--- a/packages/web-components/src/textarea/textarea.template.ts
+++ b/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"

From 934fc85c9c781eeebbf4995121466793e9548d97 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 12:05:59 +0000
Subject: [PATCH 3/6] fix(web-components): fix TypeScript type error in
 textarea spec - use null coalescing for autoSizerEl

Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>
---
 packages/web-components/src/textarea/textarea.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/textarea/textarea.spec.ts b/packages/web-components/src/textarea/textarea.spec.ts
index 26d5d9dae3d72d..8da1fb69475ece 100644
--- a/packages/web-components/src/textarea/textarea.spec.ts
+++ b/packages/web-components/src/textarea/textarea.spec.ts
@@ -162,7 +162,7 @@ test.describe('TextArea', () => {
 
         const autoSizerIsInsideRoot = await element.evaluate((node: TextArea) => {
           const root = node.shadowRoot?.querySelector('.root');
-          return root?.contains(node.autoSizerEl) ?? false;
+          return root?.contains(node.autoSizerEl ?? null) ?? false;
         });
 
         expect(autoSizerIsInsideRoot).toBe(true);

From 9f62c29be11c614db838d0c6d560301b4e510498 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 12:41:20 +0000
Subject: [PATCH 4/6] fix(web-components): regenerate web-components.api.md to
 include rootEl property

Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>
---
 packages/web-components/docs/web-components.api.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index 8860fb077be7d1..786afc0a2ecbd1 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/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

From c84383885c4ca4184244d7b53b49efacfb561b1d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:18:20 +0000
Subject: [PATCH 5/6] fix(web-components): add beachball change file for patch
 release

Co-authored-by: Hotell <1223799+Hotell@users.noreply.github.com>
---
 ...eb-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json

diff --git a/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json b/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json
new file mode 100644
index 00000000000000..f81e6e87a87c23
--- /dev/null
+++ b/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(web-components): TextArea auto-resize moves instead of grows in Firefox",
+  "packageName": "@fluentui/web-components",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 00f3ef2c055f4755f171a9f513ac87e3b314281c Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Mon, 9 Mar 2026 15:35:33 +0100
Subject: [PATCH 6/6] Apply suggestions from code review

---
 ...i-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json b/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json
index f81e6e87a87c23..77a98d921817c3 100644
--- a/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json
+++ b/change/@fluentui-web-components-ecda4f76-81aa-478d-bf2c-cc1f3eeb732c.json
@@ -1,6 +1,6 @@
 {
-  "type": "patch",
-  "comment": "fix(web-components): TextArea auto-resize moves instead of grows in Firefox",
+  "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"