fix(textfield): add support for [grows] when [multiline]

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 -->

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,

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...

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>

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();
         }