DisplayEmpty being set to true should cause placeholder value not to interfere with label.

[elijah1210]

When a select field is used with a placeholder (displayEmpty=true), the label of the field should not collapse back down into the input.

• [X ] This is a v1.x issue.
• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a placeholder value is present, the label of the field should appear above similar to a selected value.

Current Behavior

Because the field is "empty" the label drops down and grows to normal font size to fill the input.

Steps to Reproduce

Link: https://codesandbox.io/s/rrwky2ww3p

1. Use the "placeholder" select to select a value.
2. Use the "required" select to select none.
3. Observe that the label for the "placeholder" select drops down overlapping with the placeholder value.

Context

There is a select field where the options are populated after a database call. Since the system is user configurable, there is a possibility that the number of options generated can be very large.

This field is used to select specific filter criteria but in the event that a user wants to search for records that can be any of the possible options, an option for "All" was added.

Your Environment

Tech	Version
Material-UI	v1.4.0
React	v16.4.1
browser	Chrome v67.0.3396.99
etc.	N/A

[oliviertassinari]

@elijah1210 Thanks for opening this issue. You have two options. Either you force the label to shrink with the shrink property. Or you make the "All" value explicit by giving it a specific value, not a blank value:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  }
});

class SimpleSelect extends React.Component {
  state = {
    age: "all",
    name: ""
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.root} autoComplete="off">
        <FormControl className={classes.formControl}>
          <InputLabel htmlFor="age-auto-width">Age</InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            name="age"
            displayEmpty
          >
            <MenuItem value="all" disabled>
              All
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel shrink htmlFor="age-auto-width">
            Age
          </InputLabel>
          <Select
            value={this.state.name}
            onChange={this.handleChange}
            name="name"
            displayEmpty
          >
            <MenuItem value="" disabled>
              Placeholder
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
      </form>
    );
  }
}

SimpleSelect.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleSelect);

https://codesandbox.io/s/30q2yokxy6

[oliviertassinari]

I have added a documentation example for this use case in #12342. Automatically detecting this situation would probably require too much code. It doesn't worth the increase of bundle size.