diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index 946c8f8afe..c01dac090a 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -58,7 +58,7 @@ export class TextfieldBase extends ManageHelpText(
     @property({ type: Boolean, reflect: true })
     public focused = false;
 
-    @query('.input')
+    @query('.input:not(#sizer)')
     protected inputElement!: HTMLInputElement | HTMLTextAreaElement;
 
     @property({ type: Boolean, reflect: true })
@@ -225,9 +225,11 @@ export class TextfieldBase extends ManageHelpText(
 
     private get renderMultiline(): TemplateResult {
         return html`
-            ${this.grows && !this.quiet && this.rows === -1
+            ${this.grows && this.rows === -1
                 ? html`
-                      <div id="sizer">${this.value}&#8203;</div>
+                      <div id="sizer" class="input" aria-hidden="true">
+                          ${this.value}&#8203;
+                      </div>
                   `
                 : nothing}
             <!-- @ts-ignore -->
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
index c80d47916b..f6d2a14d0a 100644
--- a/packages/textfield/src/textfield.css
+++ b/packages/textfield/src/textfield.css
@@ -44,15 +44,6 @@ textarea {
     forced-color-adjust: var(--swc-test-forced-color-adjust);
 }
 
-:host([grows]:not([quiet])) .input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    resize: none;
-    overflow: hidden;
-}
-
 :host([grows]:not([quiet])) #textfield:after {
     grid-area: unset;
     min-block-size: calc(
@@ -67,70 +58,10 @@ textarea {
     );
 }
 
-:host([grows]) #sizer {
-    min-block-size: var(
-        --mod-text-area-min-block-size,
-        var(--spectrum-text-area-min-block-size)
-    );
+#sizer {
+    block-size: auto;
     word-break: break-word;
-    white-space: pre-wrap;
-    box-sizing: border-box;
-    overflow-wrap: break-word;
-    border: var(--spectrum-textfield-texticon-border-size) solid;
-    border-radius: var(--spectrum-textfield-texticon-border-radius);
-    padding-block-end: calc(
-        var(
-                --mod-textfield-spacing-block-end,
-                var(--spectrum-textfield-spacing-block-end)
-            ) +
-            var(
-                --mod-textfield-border-width,
-                var(--spectrum-textfield-border-width)
-            )
-    );
-    padding-block-start: calc(
-        var(
-                --mod-textfield-spacing-block-start,
-                var(--spectrum-textfield-spacing-block-start)
-            ) +
-            var(
-                --mod-textfield-border-width,
-                var(--spectrum-textfield-border-width)
-            )
-    );
-    padding-inline: calc(
-        var(
-                --mod-textfield-spacing-inline,
-                var(--spectrum-textfield-spacing-inline)
-            ) +
-            var(
-                --mod-textfield-border-width,
-                var(--spectrum-textfield-border-width)
-            )
-    );
-    text-indent: 0;
-    inline-size: 100%;
-    vertical-align: top;
-    margin: 0;
-    overflow: visible;
-    font-family: var(--spectrum-textfield-texticon-text-font-family);
-    font-size: var(--spectrum-textfield-texticon-text-size);
-    line-height: var(--spectrum-textfield-texticon-text-line-height);
-    text-overflow: ellipsis;
-    transition: border-color
-            var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out,
-        box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-in-out;
-    outline: none;
-    -webkit-appearance: none; /* stylelint-disable-line */
-    -moz-appearance: textfield; /* stylelint-disable-line */
-}
-
-:host([grows][quiet]) #sizer {
-    border-radius: var(--spectrum-textfield-quiet-texticon-border-radius);
-    border-width: 0 0 var(--spectrum-textfield-quiet-texticon-border-size) 0;
-    resize: none;
-    overflow-y: hidden;
+    opacity: 0;
 }
 
 .icon,
@@ -162,6 +93,15 @@ textarea {
     min-block-size: auto;
 }
 
+:host([grows]:not([rows])) .input:not(#sizer) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    resize: none;
+    overflow: hidden;
+}
+
 /* restore specificity from the original Spectrum CSS */
 
 :host([disabled][quiet]) #textfield .input,
diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts
index c3d9450dd7..5c5b296cd5 100644
--- a/packages/textfield/stories/textarea.stories.ts
+++ b/packages/textfield/stories/textarea.stories.ts
@@ -94,6 +94,18 @@ export const grows = (): TemplateResult => html`
     ></sp-textfield>
 `;
 
+export const growsQuiet = (): TemplateResult => html`
+    <sp-field-label for="story">Enter your life story...</sp-field-label>
+    <sp-textfield
+        multiline
+        id="story"
+        value="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
+        grows
+        quiet
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+
 export const growsEmpty = (): TemplateResult => html`
     <sp-field-label for="empty">
         This textfield hasn't been used yet
@@ -181,12 +193,34 @@ export const with5Rows = (): TemplateResult => html`
     <sp-textfield
         multiline
         id="predefinedRows"
-        value="Line 1\nLine 2\nLine 3\nLine 4\nLine 5"
+        value="Line 1
+Line 2
+Line 3
+Line 4
+Line 5"
         placeholder="Enter your life story"
         rows="5"
     ></sp-textfield>
 `;
 
+export const rowsDefeatsGrows = (): TemplateResult => html`
+    <sp-field-label for="predefinedRows">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        grows
+        id="predefinedRows"
+        value="Line 1
+Line 2
+Line 3
+Line 4
+Line 5"
+        placeholder="Enter your life story"
+        rows="3"
+    ></sp-textfield>
+`;
+
 export const with1Row = (): TemplateResult => html`
     <sp-field-label for="predefinedRows">
         Enter your life story with very long words...
diff --git a/packages/textfield/textarea.md b/packages/textfield/textarea.md
index a5473c7e66..b9ad7aee34 100644
--- a/packages/textfield/textarea.md
+++ b/packages/textfield/textarea.md
@@ -130,9 +130,7 @@ The quiet style works best when a clear layout (vertical stack, table, grid) ass
 
 ### Grows
 
-By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accomidate the full content of the element.
-
-Note: When leveraging the `quiet` attribute, the `grows` attribute does not effect the final delivery of the element.
+By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accommodate the full content of the element.
 
 ```html
 <div style="display: flex; flex-wrap: wrap;">
@@ -142,7 +140,7 @@ Note: When leveraging the `quiet` attribute, the `grows` attribute does not effe
             id="story-4"
             multiline
             placeholder="Enter your name"
-            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accomidate the full content of the element."
+            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accommodate the full content of the element."
         ></sp-textfield>
     </div>
     <div>
@@ -152,7 +150,7 @@ Note: When leveraging the `quiet` attribute, the `grows` attribute does not effe
             grows
             multiline
             placeholder="Enter your name"
-            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accomidate the full content of the element."
+            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accommodate the full content of the element."
         ></sp-textfield>
     </div>
     <div>
@@ -162,7 +160,7 @@ Note: When leveraging the `quiet` attribute, the `grows` attribute does not effe
             grows
             multiline
             placeholder="Enter your name"
-            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accomidate the full content of the element."
+            value="By default the text area has a fixed height and will scroll when text entry goes beyond the available space. With the use of the `grows` attribute the text area will grow to accommodate the full content of the element."
             quiet
         ></sp-textfield>
     </div>
diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts
index 9d5261178c..608c3b9494 100644
--- a/projects/story-decorator/src/StoryDecorator.ts
+++ b/projects/story-decorator/src/StoryDecorator.ts
@@ -269,7 +269,12 @@ export class StoryDecorator extends SpectrumElement {
 
     protected handleKeydown(event: KeyboardEvent): void {
         const path = event.composedPath();
-        const hasInput = path.some((node) => node instanceof HTMLInputElement);
+        const hasInput = path.some(
+            (node) =>
+                node instanceof HTMLInputElement ||
+                node instanceof HTMLTextAreaElement ||
+                !!(node as HTMLElement).isContentEditable
+        );
         if (hasInput) {
             event.stopPropagation();
         }