How to include placeholder in select component in Material UI@Next

• 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

[slamjs]

you can use the following

displayEmpty={true}
renderValue={value => value?.length ? Array.isArray(value) ? value.join(', ') : value : 'placeholder'}