[TextField] Fix placeholder issue (#7838)

mui · Aug 23, 2017 · 8d610b7 · 8d610b7
1 parent 1a73450
commit 8d610b7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/docs/src/pages/demos/text-fields/TextFields.js b/docs/src/pages/demos/text-fields/TextFields.js
@@ -73,6 +73,17 @@ class TextFields extends Component {
           autoComplete="current-password"
           margin="normal"
         />
+        <TextField
+          id="date"
+          label="From date"
+          type="date"
+          defaultValue="2017-05-24"
+          className={classes.textField}
+          margin="normal"
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
         <TextField
           id="multiline-flexible"
           label="Multiline"
@@ -92,17 +103,6 @@ class TextFields extends Component {
           className={classes.textField}
           margin="normal"
         />
-        <TextField
-          id="date"
-          label="From date"
-          type="date"
-          defaultValue="2017-05-24"
-          className={classes.textField}
-          margin="normal"
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
         <TextField
           id="helperText"
           label="Helper text"
@@ -111,11 +111,22 @@ class TextFields extends Component {
           helperText="Some important text"
           margin="normal"
         />
+        <TextField
+          label="With placeholder"
+          placeholder="Placeholder"
+          className={classes.textField}
+        />
+        <TextField
+          label="With placeholder multiline"
+          placeholder="Placeholder"
+          multiline
+          className={classes.textField}
+        />
         <TextField
           id="placeholder"
           label="Label"
           InputProps={{ placeholder: 'Placeholder' }}
-          helperText="Full width!!!"
+          helperText="Full width!"
           fullWidth
           margin="normal"
         />

diff --git a/src/Input/Input.js b/src/Input/Input.js
@@ -114,7 +114,8 @@ export const styles = (theme: Object) => {
         // Remove the padding when type=search.
         appearance: 'none',
       },
-      'label + $formControl > &': {
+      // Show and hide the placeholder logic
+      'label + $formControl &': {
         '&::-webkit-input-placeholder': placeholderForm,
         '&::-moz-placeholder': placeholderForm, // Firefox 19+
         '&:-ms-input-placeholder': placeholderForm, // IE 11
@@ -162,7 +163,7 @@ export const styles = (theme: Object) => {
       },
     },
     multiline: {
-      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit + 1}px`,
+      padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
     },
     inputDisabled: {
       opacity: 1, // Reset iOS opacity