Material-ui: How to include placeholder in select component in Material UI@Next

[NayanSrivastav]

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

Expected Behavior

Select field should show Placeholder text.

Current Behavior

Placeholder text should be visible when passed to Input tag.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.42 |
| React | 16.1.0 |
| browser | Chrome( 65.0.3325.181) |

[oliviertassinari]

@NayanSrivastav This concern has already been raised in #8875. As far as the discussion went, the conclusion was that the placeholder property for a select component doesn't make sense. With the given information, it's not something we plan on addressing. Instead, @sakulstra has raised some great alternatives: https://github.com/mui-org/material-ui/pull/8875#issuecomment-349771804

import React from "react";
import { render } from "react-dom";
import { Select } from "material-ui";
import { withStyles } from "material-ui/styles";
import { MenuItem } from 'material-ui/Menu';
import classNames from "classnames";

class App extends React.Component {
  state = {
      select: 'none'
  }

  handleChange = field => e => {
    this.setState({[field]: e.target.value})
  }

  render() {
    return (
      <div>
        <Select native defaultValue='none'>
          <option value="none" disabled>
            uncontrolled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          <option value="none" disabled>
            controlled Native placeholder
          </option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select native value={this.state.select} onChange={this.handleChange('select')}>
          {this.state.select === 'none' && <option value="none" disabled>
            Autohide after selection
          </option>}
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </Select>
        <br />
        <Select value={this.state.select} onChange={this.handleChange('select')}>
          <MenuItem value="none" disabled>
            controlled Non native placeholder
          </MenuItem>
          <MenuItem value="1">Option 1</MenuItem>
          <MenuItem value="2">Option 2</MenuItem>
          <MenuItem value="3">Option 3</MenuItem>
        </Select>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/wqq7059oq8

[oliviertassinari]

@NayanSrivastav Now, maybe it's a matter on improving the documentation or adding some warnings when people are trying to provide a placeholder.

[NayanSrivastav]

@oliviertassinari I think alternatives suggested by @sakulstra are great and yeah document must be improved so that folks coming from stable mui get clear indication that placeholder are not supported directly.

Thanks for prompt reply and closing it now.

[hadasmaimon]

@oliviertassinari this is a great alternative,
But can the placeholder option be grayed out, instead of being black?

select component with placeholder option:

textField placeholder (inside an autocomplete):

[alexanderkho]

@hadasmaimon I'm trying to do this as well, did you find a solution?

[hadasmaimon]

@hadasmaimon I'm trying to do this as well, did you find a solution?

@alexanderkho
I sent a class name that set the color to gray, in case the value is equal to the default value
```
const defaultValue = translate('Select');

const isDefaultValue = value === defaultValue;
const selectClasses = classNames(className, { 'class-font-colour-gray': isDefaultValue });

className={selectClasses}
...
/>
```

[cazroam]

You can override the theme styling with the following code:
MuiSelect: { root: { '&.MuiFilledInput-input': { color: 'grey', }, }, },

this will, however, make any selected item grey also, but that is my use-case so I'm ok with that 👍