Support objects with <Select>

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

Expected Behavior

Not showing warnings when passing an object as value to the Select component.

Current Behavior

It works but it is showing these warnings:

• Warning: Failed prop type: Invalid prop 'value' supplied to 'Select'.
• Warning: Failed prop type: Invalid prop 'value' supplied to 'Input'.
• Warning: Failed prop type: Invalid prop 'value' supplied to 'SelectInput'.

Steps to Reproduce (for bugs)

Thats my component in which I use the Select component. As you can see this.props.selectedWorkingStep is an object which causes those warnings.

class WorkingStepSelect extends React.Component {
    render() {
        return <FormControl error={this.props.error} className={this.props.classes.formControl}>
            <InputLabel htmlFor="workingStepSelect">{germanMessages.resources.controls.workingStepSelect.label}</InputLabel>
            <Select
                value={this.props.selectedWorkingStep}
                onChange={this.props.onChangeWorkingStep}
                input={<Input name="workingStep" id="workingStepSelect" />}
            >
                {this.props.workingSteps.map((workingStep) => {
                    return <MenuItem key={workingStep.id} value={workingStep}>{workingStep.name}</MenuItem>
                })}
            </Select>
            <FormHelperText className="error-message" error={this.props.error}>{germanMessages.resources.controls.workingStepSelect.errorMessages[this.props.error]}</FormHelperText>
        </FormControl>
    }
}

PropTypes:

WorkingStepSelect.propTypes = {
    selectedWorkingStep: PropTypes.any,
    workingSteps: PropTypes.arrayOf(PropTypes.object),
    onChangeWorkingStep: PropTypes.func,
    error: PropTypes.any,
    classes: PropTypes.object
};

CodeSandbox example

https://codesandbox.io/s/8x8r5plx32?module=%2Fsrc%2Fpages%2Findex.js

Context

Its not that critical because it is working for me(maybe there are errors which I don’t encountered yet). Maybe #10834 has the same problem but I don’t know it is the same reason for the warning because my warnings show up not depending on if I select an item of the Select.

Your Environment

Tech	Version
Material-UI	material-ui@1.0.0-beta.34
React	react@16.2.0
browser	Chrome Version 65
etc

[oliviertassinari]

I think that the best step going forward is to write a custom prop-type validator. The warning message isn’t actionable right now: https://github.com/mui-org/material-ui/blob/7f73f967c1f8c405eb14304de0bbd1aeae5b4d71/src/TextField/TextField.js#L261-L265

[oliviertassinari]

@npeham Thanks a lot for the reproduction example! The value proptype isn’t any. It has to be a string or a number (or an array of this). You are providing an object to the component:

  {
    id: 1,
    name: "StepOne"
  }

While it’s “working”, it comes with two drawbacks:

• You can’t switch on and off the native property base on your environment. For instance, native={true} works great on mobile.
• The value can’t be serialized and sent down to the server with a raw POST/GET request: value="[object Object]" It’s important when you are using React and Material-UI as a server-side templating engine without client-side rendering and in different other niche use cases. I also “believe” it helps with accessibility.

Here is an updated version without the warning https://codesandbox.io/s/1yvymk2r67.

Now, I think that we should something about this confusing warning message. I have seen it too personally, wtf: Warning: Failed prop type: Invalid prop 'value' supplied to 'Select'.