[TextField] Fix width issue

mui · Feb 9, 2017 · 8ce1749 · 8ce1749
1 parent ca222be
commit 8ce1749
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/src/Input/Input.js b/src/Input/Input.js
@@ -13,7 +13,8 @@ function isDirty(obj) {
 export const styleSheet = createStyleSheet('Input', (theme) => {
   return {
     wrapper: {
-      display: 'flex',
+      // Mimics the default input display property used by browsers for an input.
+      display: 'inline-block',
       position: 'relative',
     },
     formControl: {
@@ -29,7 +30,7 @@ export const styleSheet = createStyleSheet('Input', (theme) => {
         content: '""',
         height: 2,
         position: 'absolute',
-        width: '100%',
+        right: 0,
         transform: 'scaleX(0)',
         transition: theme.transitions.create(
           'transform',
@@ -60,6 +61,7 @@ export const styleSheet = createStyleSheet('Input', (theme) => {
       lineHeight: 1,
       appearance: 'textfield', // Improve type search style.
       color: theme.palette.text.primary,
+      width: '100%',
       '&:focus': {
         outline: 0,
       },

diff --git a/test/regressions/screenshots/baseline/Input/Inputs/chrome-53.0.2785.143-linux.png b/test/regressions/screenshots/baseline/Input/Inputs/chrome-53.0.2785.143-linux.png
diff --git a/test/regressions/site/src/tests/Input/Inputs.js b/test/regressions/site/src/tests/Input/Inputs.js
@@ -1,6 +1,7 @@
 // @flow weak
 
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import { createStyleSheet } from 'jss-theme-reactor';
 import customPropTypes from 'material-ui/utils/customPropTypes';
 import Input from 'material-ui/Input/Input';
@@ -9,10 +10,14 @@ const styleSheet = createStyleSheet('Inputs', () => ({
   container: {
     display: 'flex',
     flexDirection: 'column',
+    width: 200,
   },
   input: {
     margin: 10,
   },
+  large: {
+    width: 300,
+  },
 }));
 
 export default class Inputs extends Component {
@@ -30,29 +35,35 @@ export default class Inputs extends Component {
     const classes = this.context.styleManager.render(styleSheet);
 
     return (
-      <div className={classes.container}>
-        <Input
-          defaultValue="Hello world"
-          className={classes.input}
-        />
-        <Input
-          placeholder="Placeholder"
-          className={classes.input}
-        />
-        <Input
-          value="Disabled"
-          className={classes.input}
-          disabled
-        />
-        <Input
-          error
-          value="Error"
-          className={classes.input}
-        />
+      <div>
+        <div className={classes.container}>
+          <Input
+            value="Hello world"
+            className={classes.input}
+          />
+          <Input
+            placeholder="Placeholder"
+            className={classes.input}
+          />
+          <Input
+            value="Disabled"
+            className={classes.input}
+            disabled
+          />
+          <Input
+            error
+            value="Error"
+            className={classes.input}
+          />
+          <Input
+            value="Focused"
+            ref={(c) => { this.focusInput = c; }}
+            className={classes.input}
+          />
+        </div>
         <Input
-          value="Focused"
-          ref={(c) => { this.focusInput = c; }}
-          className={classes.input}
+          value="Large input"
+          className={classNames(classes.input, classes.large)}
         />
       </div>
     );