[Select] Support defaultValue

• [x ] This is a v1.x issue (v0.x is no longer maintained).
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

It’s a form used for adding record or edit this record., so when add new record defaultValue has no value but when editing this record, defaultValue will be the value which may be edited.

If I remove value prop, error appear that it’s required prop

Current Behavior

I got this error:

SelectInput contains an input of type hidden with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props

Context

Your Environment

Tech	Version
Material-UI	v1.0.0
React	v16.4.0
browser	Chrome v68.0.3440.5
etc

[oliviertassinari]

@engmagdy87 Maybe we should better warn about it. The Select component doesn’t support the defaultValue prop as we are speaking. The component needs to be controlled but I’m not against implementing this behavior.

[oliviertassinari]

@atifmansoor I don’t think that performance is a concern here. It’s more about code correctness and how easy it’s for somebody to get it right. Regarding implementing the default value behavior. It should be as easy as:

function ControlledSelect() {
  const [age, setAge] = React.useState(10);

  function handleChange(event) {
    setAge(event.target.value);
  }

  return (
    <Select
      value={age}
      onChange={handleChange}
      inputProps={{
        name: 'age',
        id: 'demo-controlled-open-select',
      }}
    >
      <MenuItem value="">
        <em>None</em>
      </MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

export default ControlledSelect;