Material-ui: [Select] Support defaultValue

[engmagdy87]

• [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.

[atifmansoor]

@oliviertassinari If it's a controlled component, how can we programmatically select a default value for the user? Currently, I'm using componentDidUpdate() with setState() and I compare current props with previous props. It works, but is there another way? If we had defaultValue on this component, would that mean better performance since we aren't re-rendering with componentDidUpdate? Or would that entail the same performance? Thanks!

[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;

[atifmansoor]

Thanks for the reply!

Your example is actually similar to what I am doing, except it's using the new React Hooks. In my case, since I want the value to change based on props, I would use the useEffect hook instead of componentDidUpdate.

It's more about code correctness and how easy it's for somebody to get it right

I do admit as a novice React dev, this issue did give me plenty of grief and burned too much of my time. Especially considering that most of the other components do have a defaultValue param.

What is involved in implementing this? Would it be worth it to at least update the doc to show an example of how to set a default value based on props? I could contribute that much at the least.

[oliviertassinari]

What is involved in implementing this? Would it be worth it to at least update the doc to show an example of how to set a default value based on props?

This is a generic concern. I would challenge the need in the first place. Maybe you can simplify the situation by changing the requirements.

[manoopratap]

how to set the default value when we are passing the array into the menu item

[oliviertassinari]

My bad, it's already supported.