fix(textfield): clearly mark/support "multiline" as a requirement of …

…"grows"
adobe · Feb 16, 2024 · a3e464d · a3e464d
1 parent 30f5bb5
commit a3e464d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 deletions.
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -119,7 +119,8 @@ export class TextfieldBase extends ManageHelpText(
     public pattern?: string;
 
     /**
-     * Whether a form control delivered with the `multiline` attribute will change size to accomodate longer input
+     * Whether a form control delivered with the `multiline` attribute will change size
+     * vertically to accomodate longer input
      */
     @property({ type: Boolean, reflect: true })
     public grows = false;
@@ -289,7 +290,7 @@ export class TextfieldBase extends ManageHelpText(
 
     private get renderMultiline(): TemplateResult {
         return html`
-            ${this.grows && this.rows === -1
+            ${this.multiline && this.grows && this.rows === -1
                 ? html`
                       <div id="sizer" class="input" aria-hidden="true">
                           ${this.value}&#8203;

diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
@@ -48,20 +48,6 @@ textarea {
     forced-color-adjust: var(--swc-test-forced-color-adjust);
 }
 
-:host([grows]:not([quiet])) #textfield:after {
-    grid-area: unset;
-    min-block-size: calc(
-        var(
-                --mod-text-area-min-block-size,
-                var(--spectrum-text-area-min-block-size)
-            ) +
-            var(
-                --mod-textfield-focus-indicator-gap,
-                var(--spectrum-textfield-focus-indicator-gap)
-            ) * 2
-    );
-}
-
 #sizer {
     block-size: auto;
     word-break: break-word;
@@ -97,15 +83,6 @@ 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,
@@ -136,3 +113,26 @@ textarea {
         )
     );
 }
+
+:host([multiline][grows]:not([quiet])) #textfield:after {
+    grid-area: unset;
+    min-block-size: calc(
+        var(
+                --mod-text-area-min-block-size,
+                var(--spectrum-text-area-min-block-size)
+            ) +
+            var(
+                --mod-textfield-focus-indicator-gap,
+                var(--spectrum-textfield-focus-indicator-gap)
+            ) * 2
+    );
+}
+
+:host([multiline][grows]:not([rows])) .input:not(#sizer) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    resize: none;
+    overflow: hidden;
+}
diff --git a/packages/textfield/stories/textfield.stories.ts b/packages/textfield/stories/textfield.stories.ts
@@ -52,6 +52,20 @@ export const Default = (): TemplateResult => {
     `;
 };
 
+export const growsOnly = (): TemplateResult => {
+    return html`
+        <sp-field-label for="grows-only">
+            This Textfield has the "grows" attribute without the "multiline"
+            attribute
+        </sp-field-label>
+        <sp-textfield
+            grows
+            id="grows-only"
+            placeholder="Does not grow or display incorrectly"
+        ></sp-textfield>
+    `;
+};
+
 export const quiet = (): TemplateResult => {
     return html`
         <sp-field-label for="name">Enter your name</sp-field-label>