diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index 6c15d6f33b..154852c823 100644
--- 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`
${this.value}
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
index 849c1d540b..3413c31d2f 100644
--- 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
index 908ba50c16..939aebfde7 100644
--- 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`
+
+ This Textfield has the "grows" attribute without the "multiline"
+ attribute
+
+
+ `;
+};
+
export const quiet = (): TemplateResult => {
return html`
Enter your name