Make default textarea grow based on text content unless there is an explicit height (#3379)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

@@ -74,10 +74,6 @@ governing permissions and limitations under the License.
       /* If the user overrides the width of the field, propagate to the inner component */
       width: 100%;
     }
-
-    .spectrum-Field-field--multiline {
-      flex: 1 1 auto;
-    }
   }
 
   /* The side label variant of Field is inline, and fills as much space as needed
@@ -97,6 +93,9 @@ governing permissions and limitations under the License.
        * Should default to form field's default width and and allow users to override with custom width. */
       width: var(--spectrum-field-default-width);
 
+      /* If the user overrides the height of the field, propagate to the inner wrapper element */
+      height: 100%;
+
       .spectrum-Field-field {
         /* If the user overrides the width of the field, propagate to the inner component */
         width: 100%;
@@ -107,10 +106,6 @@ governing permissions and limitations under the License.
       flex: 1;
       min-width: 0;
     }
-
-    .spectrum-Field-field--multiline {
-      height: 100%;
-    }
   }
 }
 

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -35,10 +35,6 @@ governing permissions and limitations under the License.
   min-width: var(--spectrum-textfield-min-width);
   width: var(--spectrum-component-single-line-width);
 
-  &:not(.spectrum-Textfield--quiet).spectrum-Textfield--multiline .spectrum-Textfield-input:not(:disabled) {
-    resize: vertical;
-  }
-
   &.spectrum-Textfield--quiet.spectrum-Textfield--multiline .spectrum-Textfield-input {
     height: var(--spectrum-textfield-height);
     min-height: var(--spectrum-textfield-height);
@@ -164,6 +160,7 @@ governing permissions and limitations under the License.
     height: var(--spectrum-textfield-multiline-height);
     min-height: var(--spectrum-textfield-multiline-min-height);
     padding: var(--spectrum-textfield-multiline-padding-top) var(--spectrum-textfield-multiline-padding-x) var(--spectrum-textfield-multiline-padding-bottom) calc(var(--spectrum-textfield-multiline-padding-x) - 1px);
+    resize: none;
 
     /* Remove the default vertical scrollbar for textarea in IE. */
     overflow: auto;
@@ -176,10 +173,6 @@ governing permissions and limitations under the License.
     /* removes the side padding to align the text properly */
     padding-inline-start: var(--spectrum-textfield-quiet-padding-x);
     padding-inline-end: var(--spectrum-textfield-quiet-padding-x);
-
-    /* Treat all quiet inputs and textareas the same */
-    resize: none;
-    overflow-y: hidden;
   }
 
   .spectrum-Textfield--valid & {
@@ -195,6 +188,24 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Textfield-wrapper .spectrum-Textfield--multiline {
+  /* when textarea is inside a label wrapper, make it flex to take up remaining height. */
+  flex: 1 1 auto;
+  min-height: 0;
+
+  &.spectrum-Textfield--quiet {
+    /* quiet textfields grow based on text content, up to the height of the container. */
+    /* but we need to keep help text next to input */
+    flex: 0 1 auto;
+    max-height: 100%;
+
+    .spectrum-Textfield-input {
+      /* make textarea scroll when reaching height of container */
+      max-height: 100%;
+    }
+  }
+}
+
 .spectrum-Textfield-validationIcon {
   /* TODO: Confirm if this is ok for the validation icon sizing
     Note that the sizes are a bit different when compared with old background icons(more noticable for checkmark)

packages/@react-spectrum/label/src/Field.tsx

@@ -79,12 +79,23 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
         showErrorIcon={showErrorIcon} />
     );
 
-    let renderChildren = () => (
-      <Flex direction="column" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
-        {children}
-        {hasHelpText && renderHelpText()}
-      </Flex>
-    );
+    let renderChildren = () => {
+      if (labelPosition === 'side') {
+        return (
+          <Flex direction="column" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
+            {children}
+            {hasHelpText && renderHelpText()}
+          </Flex>
+        );
+      }
+
+      return (
+        <>
+          {children}
+          {hasHelpText && renderHelpText()}
+        </>
+      );
+    };
 
     return (
       <div

packages/@react-spectrum/label/test/Field.test.js

@@ -52,7 +52,16 @@ describe('Field', function () {
     let {getByRole} = renderField({ref});
     let field = getByRole('textbox').closest('div');
 
-    expect(ref.current).toBe(field.parentNode);
+    expect(ref.current).toBe(field);
+  });
+  describe('labelPosition: side', function () {
+    it('supports a ref', function () {
+      let ref = React.createRef();
+      let {getByRole} = renderField({ref, labelPosition: 'side'});
+      let field = getByRole('textbox').closest('div');
+
+      expect(ref.current).toBe(field.parentNode);
+    });
   });
   describe('help text', function () {
     describe('description', function () {

packages/@react-spectrum/textfield/src/TextArea.tsx

@@ -35,12 +35,18 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
   let inputRef = useRef<HTMLTextAreaElement>();
 
   let onHeightChange = useCallback(() => {
-    if (isQuiet) {
+    // Quiet textareas always grow based on their text content.
+    // Standard textareas also grow by default, unless an explicit height is set.
+    if (isQuiet || !props.height) {
       let input = inputRef.current;
       let prevAlignment = input.style.alignSelf;
+      let prevOverflow = input.style.overflow;
       input.style.alignSelf = 'start';
+      input.style.overflow = 'hidden';
       input.style.height = 'auto';
-      input.style.height = `${input.scrollHeight}px`;
+      // offsetHeight - clientHeight accounts for the border/padding.
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+      input.style.overflow = prevOverflow;
       input.style.alignSelf = prevAlignment;
     }
   }, [isQuiet, inputRef]);

packages/@react-spectrum/textfield/src/TextFieldBase.tsx

@@ -38,7 +38,6 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
 
 function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
   let {
-    label,
     validationState,
     icon,
     isQuiet = false,
@@ -138,18 +137,13 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     </div>
   );
 
-  if (label) {
-    textField = React.cloneElement(textField, mergeProps(textField.props, {
-      className: multiLine ? 'spectrum-Field-field--multiline' : ''
-    }));
-  }
-
   return (
     <Field
       {...props}
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
+      wrapperClassName={classNames(styles, 'spectrum-Textfield-wrapper')}
       showErrorIcon={false}
       ref={domRef}>
       {textField}

packages/@react-spectrum/textfield/stories/TextArea.stories.js

@@ -136,13 +136,23 @@ storiesOf('TextArea', module)
     'custom height with label',
     () => (
       <Form>
-        <TextArea label="Height size-2000" height="size-2000" />
-        <TextArea label="Height size-2000" height="size-2000" isQuiet />
-        <TextArea labelPosition="side" label="Height size-2000" height="size-2000" />
-        <TextArea labelPosition="side" label="Height size-2000" height="size-2000" isQuiet />
+        <TextArea label="Custom height" description="height: size-2000" height="size-2000" />
+        <TextArea label="Custom height" description="height: size-2000" height="size-2000" isQuiet />
+        <TextArea labelPosition="side" label="Custom height" description="height: size-2000" height="size-2000" />
+        <TextArea labelPosition="side" label="Custom height" description="height: size-2000" height="size-2000" isQuiet />
       </Form>
     )
   )
+  .add(
+    'changeable helptext',
+    () => <ValidationExample />,
+    {description: {data: 'Verify that the changing size of the error message does not interfere with the height. To test, delete the input, then type the character "a". Height should update to match.'}}
+  )
+  .add(
+    'changeable helptext custom height',
+    () => <ValidationExample height="175px" minHeight="100px" maxHeight="50vh" />,
+    {description: {data: 'Verify that the changing size of the error message does not interfere with the height. To test, delete the input, then type the character "a". Height should update to match.'}}
+  )
   .add('controlled interactive',
     () => <ControlledTextArea />
   )
@@ -219,3 +229,20 @@ function renderInFlexRowAndBlock(props = {}) {
     </Flex>
   );
 }
+
+function ValidationExample(props) {
+  let [value, setValue] = React.useState('0');
+  let isValid = React.useMemo(() => /^\d$/.test(value), [value]);
+
+  return (
+    <TextArea
+      {...props}
+      validationState={isValid ? 'valid' : 'invalid'}
+      value={value}
+      onChange={setValue}
+      label="Favorite number"
+      maxLength={1}
+      description="Enter a single digit number."
+      errorMessage={value === '' ? 'Empty input not allowed.' : 'Single digit numbers are 0-9. Lorem ipsum dolor.'} />
+  );
+}

packages/@react-spectrum/textfield/test/TextArea.test.js

@@ -65,9 +65,20 @@ describe('TextArea', () => {
     expect(input.style.height).toBe(`${newScrollHeight}px`);
   });
 
-  it('default does not change height', () => {
+  it('default can adjust after text "grows"', () => {
     let tree = renderComponent(TextArea, {});
     let input = tree.getByTestId(testId);
+    let newScrollHeight = 1000;
+    expect(input.style.height).toBe(`${mockScrollHeight}px`);
+    // this will be cleaned up in the afterEach
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {configurable: true, value: newScrollHeight});
+    typeText(input, '15');
+    expect(input.style.height).toBe(`${newScrollHeight}px`);
+  });
+
+  it('default does not change height when a height prop is set', () => {
+    let tree = renderComponent(TextArea, {height: 'size-2000'});
+    let input = tree.getByTestId(testId);
     expect(input.style.height).toBe('');
     typeText(input, '15');
     expect(input.style.height).toBe('');