Contolled autosizing textarea (codesandbox#3734)

* contolled autosizing textarea

* fix

Co-authored-by: Sara Vieira <[email protected]>

Author: siddharthkp

packages/components/src/components/Textarea/index.stories.tsx

@@ -18,15 +18,14 @@ export const Placeholder = () => (
 
 export const MaxLength = () => (
   <Wrapper>
-    <Textarea maxLength={10} label="Your full name" placeholder="John Doe" />
+    <Textarea maxLength={10} placeholder="John Doe" />
   </Wrapper>
 );
 
 export const onChange = () => (
   <Wrapper>
     <Textarea
       maxLength={10}
-      label="Your full name"
       placeholder="John Doe"
       onChange={action('textarea change')}
     />
@@ -38,3 +37,23 @@ export const autoResize = () => (
     <Textarea autosize placeholder="Write a lot of lines here" />
   </Wrapper>
 );
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <>
+      <Wrapper>
+        <Textarea
+          autosize
+          maxLength={20}
+          value={value}
+          onChange={event => setValue(event.target.value)}
+          placeholder="Write a lot of lines here"
+        />
+      </Wrapper>
+      <button type="button" onClick={() => setValue('')}>
+        clear value
+      </button>
+    </>
+  );
+};

packages/components/src/components/Textarea/index.tsx

@@ -1,13 +1,16 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
-import { Stack, Input } from '../..';
+import Rect from '@reach/rect';
+import VisuallyHidden from '@reach/visually-hidden';
+import { Stack, Input, Text } from '../..';
 
 interface ITextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   maxLength?: number;
   autosize?: boolean;
   value?: string;
+  defaultValue?: string;
 }
 
 export const TextareaComponent: any = styled(Input).attrs({
@@ -36,17 +39,29 @@ const Count = styled.div<{ limit: boolean }>(({ limit }) =>
 
 export const Textarea: React.FC<ITextareaProps> = ({
   maxLength,
+  defaultValue = '',
+  value = '',
   onChange,
   onKeyPress,
   autosize,
   ...props
 }) => {
-  const [value, setValue] = useState(props.value || '');
+  const [innerValue, setInnerValue] = React.useState<string>(defaultValue);
+
+  /**
+   * To support both contolled and uncontrolled components
+   * We sync props.value with internalValue
+   */
+  React.useEffect(
+    function syncValue() {
+      setInnerValue(value);
+    },
+    [value]
+  );
 
   const internalOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     if (onChange) onChange(event);
-    setValue(event.target.value);
-    if (autosize) resize(event.target);
+    setInnerValue(event.target.value);
   };
 
   const Wrapper = useCallback(
@@ -61,27 +76,53 @@ export const Textarea: React.FC<ITextareaProps> = ({
     [maxLength]
   );
 
-  const resize = (element: HTMLTextAreaElement) => {
-    const offset = 2; // for borders on both sides
-    element.style.height = ''; // reset before setting again
-    element.style.height = element.scrollHeight + offset + 'px';
-  };
-
   return (
     <>
       <Wrapper>
-        <TextareaComponent
-          value={value}
-          onChange={internalOnChange}
-          maxLength={maxLength}
-          {...props}
-        />
+        <Autosize value={innerValue}>
+          {(height: number) => (
+            <TextareaComponent
+              value={innerValue}
+              onChange={internalOnChange}
+              maxLength={maxLength}
+              style={{ height }}
+              {...props}
+            />
+          )}
+        </Autosize>
+
         {maxLength ? (
-          <Count limit={maxLength <= value.length}>
-            {value.length}/{maxLength}
+          <Count limit={maxLength <= innerValue.length}>
+            {innerValue.length}/{maxLength}
           </Count>
         ) : null}
       </Wrapper>
     </>
   );
 };
+
+const Autosize = ({ value, ...props }) => (
+  <Rect>
+    {({ rect, ref }) => (
+      <>
+        <VisuallyHidden>
+          <Text
+            block
+            ref={ref}
+            size={3}
+            style={{
+              // match textarea styles
+              whiteSpace: 'pre',
+              lineHeight: 1,
+              minHeight: 64,
+              padding: 8,
+            }}
+          >
+            {value + ' '}
+          </Text>
+        </VisuallyHidden>
+        {props.children(rect ? rect.height + 8 : 0)}
+      </>
+    )}
+  </Rect>
+);