one textarea, smaller

Author: oliviertassinari

packages/material-ui/src/InputBase/Textarea.js

@@ -3,19 +3,6 @@ import PropTypes from 'prop-types';
 import { useForkRef } from '../utils/reactHelpers';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 
-const styles = {
-  /* Styles applied to the shallow textarea element. */
-  shadow: {
-    // Visibility needed to hide the extra text area on iPads
-    visibility: 'hidden',
-    // Remove from the content flow
-    position: 'absolute',
-    // Ignore the scrollbar width
-    overflow: 'hidden',
-    height: '0',
-  },
-};
-
 function getStyleValue(computedStyle, property) {
   return parseInt(computedStyle[property], 10) || 0;
 }
@@ -33,24 +20,27 @@ const Textarea = React.forwardRef(function Textarea(props, ref) {
   const { current: isControlled } = React.useRef(value != null);
   const inputRef = React.useRef();
   const [state, setState] = React.useState({});
-  const shadowRef = React.useRef();
   const handleRef = useForkRef(ref, inputRef);
 
   const syncHeight = React.useCallback(() => {
     const input = inputRef.current;
-    const inputShallow = shadowRef.current;
+    const savedValue = input.value;
+    const savedHeight = input.style.height;
+    const savedOverflow = input.style.overflow;
 
-    const computedStyle = window.getComputedStyle(input);
-    inputShallow.style.width = computedStyle.width;
-    inputShallow.value = input.value || props.placeholder || 'x';
+    input.style.overflow = 'hidden';
+    input.style.height = '0';
 
     // The height of the inner content
-    const innerHeight = inputShallow.scrollHeight;
+    input.value = savedValue || props.placeholder || 'x';
+    const innerHeight = input.scrollHeight;
+
+    const computedStyle = window.getComputedStyle(input);
     const boxSizing = computedStyle['box-sizing'];
 
     // Measure height of a textarea with a single row
-    inputShallow.value = 'x';
-    const singleRowHeight = inputShallow.scrollHeight;
+    input.value = 'x';
+    const singleRowHeight = input.scrollHeight;
 
     // The height of the outer content
     let outerHeight = innerHeight;
@@ -73,6 +63,10 @@ const Textarea = React.forwardRef(function Textarea(props, ref) {
         getStyleValue(computedStyle, 'border-top-width');
     }
 
+    input.style.overflow = savedOverflow;
+    input.style.height = savedHeight;
+    input.value = savedValue;
+
     setState(prevState => {
       // Need a large enough different to update the height.
       // This prevents infinite rendering loop.
@@ -114,27 +108,17 @@ const Textarea = React.forwardRef(function Textarea(props, ref) {
   };
 
   return (
-    <React.Fragment>
-      <textarea
-        value={value}
-        onChange={handleChange}
-        ref={handleRef}
-        style={{
-          height: state.outerHeight,
-          overflow: state.outerHeight === state.innerHeight ? 'hidden' : null,
-          ...style,
-        }}
-        {...other}
-      />
-      <textarea
-        aria-hidden="true"
-        className={props.className}
-        readOnly
-        ref={shadowRef}
-        tabIndex={-1}
-        style={styles.shadow}
-      />
-    </React.Fragment>
+    <textarea
+      value={value}
+      onChange={handleChange}
+      ref={handleRef}
+      style={{
+        height: state.outerHeight,
+        overflow: state.outerHeight === state.innerHeight ? 'hidden' : null,
+        ...style,
+      }}
+      {...other}
+    />
   );
 });
 

packages/material-ui/src/InputBase/Textarea.test.js

@@ -11,7 +11,7 @@ function getHeight(wrapper) {
     .props().style.height;
 }
 
-describe.only('<Textarea />', () => {
+describe('<Textarea />', () => {
   let mount;
 
   before(() => {
@@ -37,21 +37,14 @@ describe.only('<Textarea />', () => {
 
     const getComputedStyleStub = {};
 
-    function setLayout(wrapper, { getComputedStyle, inputHeight, shadowHeight }) {
-      const input = wrapper
-        .find('textarea')
-        .at(0)
-        .instance();
-      const shadow = wrapper
-        .find('textarea')
-        .at(1)
-        .instance();
+    function setLayout(wrapper, { getComputedStyle, scrollHeight, lineHeight }) {
+      const input = wrapper.find('textarea').instance();
       getComputedStyleStub[input] = getComputedStyle;
 
-      let getter = 0;
-      stub(shadow, 'scrollHeight').get(() => {
-        getter += 1;
-        return getter % 2 === 1 ? inputHeight : shadowHeight;
+      let index = 0;
+      stub(input, 'scrollHeight').get(() => {
+        index += 1;
+        return index % 2 === 1 ? scrollHeight : lineHeight;
       });
     }
 
@@ -81,8 +74,8 @@ describe.only('<Textarea />', () => {
           getComputedStyle: {
             'box-sizing': 'content-box',
           },
-          inputHeight: 30,
-          shadowHeight: 15,
+          scrollHeight: 30,
+          lineHeight: 15,
         });
         window.dispatchEvent(new window.Event('resize', {}));
         clock.tick(166);
@@ -99,8 +92,8 @@ describe.only('<Textarea />', () => {
         getComputedStyle: {
           'box-sizing': 'content-box',
         },
-        inputHeight: 30,
-        shadowHeight: 15,
+        scrollHeight: 30,
+        lineHeight: 15,
       });
       wrapper
         .find('textarea')
@@ -120,8 +113,8 @@ describe.only('<Textarea />', () => {
           'box-sizing': 'border-box',
           'border-bottom-width': `${border}px`,
         },
-        inputHeight: 30,
-        shadowHeight: 15,
+        scrollHeight: 30,
+        lineHeight: 15,
       });
       wrapper.setProps();
       wrapper.update();
@@ -136,8 +129,8 @@ describe.only('<Textarea />', () => {
           'box-sizing': 'content-box',
           'padding-top': `${padding}px`,
         },
-        inputHeight: 30,
-        shadowHeight: 15,
+        scrollHeight: 30,
+        lineHeight: 15,
       });
       wrapper.setProps();
       wrapper.update();
@@ -152,8 +145,8 @@ describe.only('<Textarea />', () => {
         getComputedStyle: {
           'box-sizing': 'content-box',
         },
-        inputHeight: 30,
-        shadowHeight: lineHeight,
+        scrollHeight: 30,
+        lineHeight,
       });
       wrapper.setProps();
       wrapper.update();
@@ -168,8 +161,8 @@ describe.only('<Textarea />', () => {
         getComputedStyle: {
           'box-sizing': 'content-box',
         },
-        inputHeight: 100,
-        shadowHeight: lineHeight,
+        scrollHeight: 100,
+        lineHeight,
       });
       wrapper.setProps();
       wrapper.update();

pages/demos/app-bar.js

@@ -1,69 +1,18 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Input from '@material-ui/core/Input';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
-const useStyles = makeStyles({
-  input: {
-    width: 200,
-  },
-  input1: {
-    fontSize: 13,
-    boxSizing: 'border-box',
-    border: '10px solid black',
-  },
-  input2: {
-    fontSize: 13,
-    boxSizing: 'content-box',
-    padding: 10,
-  },
-});
+const req = require.context('docs/src/pages/demos/app-bar', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../docs/src/pages/demos/app-bar',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/demos/app-bar';
 
-function Textarea() {
-  const [value, setValue] = React.useState(
-    `Hey, sorry for being late to respond. Here is a codesandbox. It actually happens when I reduce the font-size of the input. Try adding some text or paste a long paragraph and you will the bottom margin being increased. It works fine with the default font-size.`,
-  );
-  const classes = useStyles();
-
-  const handleChange = event => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <div>
-      <Input
-        className={classes.input}
-        multiline
-        value={value}
-        onChange={handleChange}
-        classes={{
-          input: classes.input1,
-        }}
-      />
-      <Input
-        className={classes.input}
-        multiline
-        value={value}
-        onChange={handleChange}
-        classes={{
-          input: classes.input2,
-        }}
-      />
-      <Input className={classes.input} multiline placeholder="rowsMin" rowsMin="3" />
-      <Input
-        className={classes.input}
-        multiline
-        value={value}
-        onChange={handleChange}
-        rowsMax="4"
-      />
-      <Input className={classes.input} multiline placeholder="long placeholder long placeholder" />
-      <Input
-        className={classes.input}
-        multiline
-        defaultValue="long default value long default value"
-      />
-    </div>
-  );
+function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
 }
 
-export default Textarea;
+export default Page;