[TextField] Fix the recent regressions (mui#13017)

* Make it so multiline, fullwidth textfield is not more than 100% width. * handle more issues
marcelpanse · Oct 2, 2018 · 3c36aea · 3c36aea
1 parent 2704aae
commit 3c36aea
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -56,6 +56,7 @@ function renderInput(inputProps) {
         inputRef: ref,
         classes: {
           root: classes.inputRoot,
+          input: classes.inputInput,
         },
         ...InputProps,
       }}
@@ -234,6 +235,10 @@ const styles = theme => ({
   inputRoot: {
     flexWrap: 'wrap',
   },
+  inputInput: {
+    width: 'auto',
+    flexGrow: 1,
+  },
   divider: {
     height: theme.spacing.unit * 2,
   },

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -92,6 +92,7 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '27px 12px 10px',
+      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `input` element. */
     input: {

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -80,7 +80,7 @@ function NotchedOutline(props) {
   } = props;
 
   const align = theme.direction === 'rtl' ? 'right' : 'left';
-  const labelWidth = labelWidthProp * 0.75 + 8;
+  const labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0;
 
   return (
     <fieldset

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -33,10 +33,7 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '18.5px 14px',
-      // // These values are needed to prevent us from
-      // // overrunning the notched outline (including label)
-      // paddingTop: 27,
-      // paddingBottom: 10,
+      boxSizing: 'border-box', // Prevent padding issue with fullWidth.
     },
     /* Styles applied to the `NotchedOutline` element. */
     notchedOutline: {},