6

I'm having a heck of a time with Material UI's "Select" - about 10 hours into trying to get one working the way I'd like. I'd really appreciate some help.

This question is related to a previous one: Select MenuItem doesn't show when JSX saved to state and I suspect that if the "why" were answered on that, I might get a better idea of what's going on.

What I'm trying to accomplish is having a Select that does the following normal things:

  • has all the UI goodies (shows the question in the select spot, then moves the question smaller and out of the way after you select a non-null selection)
  • upon selecting something, the label shows up (as one would expect in a drop down) rather than a blank (as I have been experiencing - check previous question)
  • no warnings in the console about 'value' being undefined
  • when I click away from the select after selecting something, I don't want the question label to move back on top of the answer like this: selected option and question label on top of each other
  • I want a 'none' option that returns the select back to it's "empty" form (That is to say, the question label shows at normal size in the select)
  • I can set a selection to be selected by default

These shouldn't be hard tasks, but I can't for the life of me get it. It' rather embarrassing.

  • Then, upon selecting something, I want to save that selection (along with the other selection options) to state (so I can save it to localStorage so the larger form doesn't 'reset' upon page refresh)

Either way, I've currently got this JSX - effectively a cut-and-paste from the material ui demos with a map for the MenuItems:

<FormControl className={classes.formControl}> <InputLabel htmlFor={this.props.label}>{this.props.label}</InputLabel> <Select value={this.state.selectLabel} onChange={this.handleSelectChange} inputProps={{ name: 'selectLabel', id: this.props.label, }} > {this.props.value.map(valueLabelPair => <MenuItem key={this.props.XMLvalue + "_" + valueLabelPair.label} value={valueLabelPair.value} > {valueLabelPair.label} </MenuItem> )} </Select> </FormControl>

the handleSelectChange looks like this -- again, exactly the same as the material UI demo.

handleSelectChange = event => { this.setState({ [event.target.name]: event.target.value }); };

This kind of works except the console gives me the following error:

Failed prop type: The prop value is marked as required in SelectInput, but its value is undefined.

and the selected option and question label go on top of each other after you click away, like so: selected option and question label on top of each other

Further, if I try to add in this code (in the componentDidMount function) with the goal of being able to pass in the 'selected'/default option...

componentDidMount() { for (var i = 0; i < this.props.value.length; i++) { if(this.props.value[i].selected) { // *works* console.log("selected found: " + this.props.value[i].label); this.setState({selectLabel:this.props.value[i].label}); } } }

it does not update the give me a default answer and also gives me the following additional error in the console (in addition to all issues above):

Warning: A component is changing an uncontrolled input of type hidden to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

What am I missing?

Improve this question

3 Answers 3

Reset to default
4

Just define selectLabel into constructor:

constructor () { super() this.state = { selectLabel:'', } }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I am unsure as to why the above solution did not work.

However, I rebuilt the Select to return "option" elements instead of "MenuItem" elements with the following function:

buildSelectOptions(optionsPairs) { // note, this references props and blank option could be split out for reuse var JSX_return = []; if (this.props.includeBlank && this.props.includeBlank === true) { JSX_return.push(<option key="nada" value="" />); } for (var optionLabel in optionsPairs) { JSX_return.push(<option key={optionLabel} value={optionsPairs[optionLabel]}>{optionLabel}</option>); } return JSX_return; }

My render now looks like this:

<FormControl className={classes.formControl}> <InputLabel htmlFor="age-native-simple">{this.props.label}</InputLabel> <Select native value={this.state.value} onChange={this.handleSelectChange('value')} inputProps={{ name: this.props.label, id: this.props.id, }} > {this.buildSelectOptions(this.props.options)} </Select> <FormHelperText>{this.props.helperText}</FormHelperText> </FormControl>

And the event handler looks like this:

handleSelectChange = name => event => { //FUTURE: combine the handlers (or split out question types to sub-components) this.setState({ [name]: event.target.value }, () => this.props.stateChangeHandler(this) ); };

the props passed to this object look like this:

{ "key": "test4", "id": "test4", "label": "Question Label 4", "XMLValue": "XMLQ4", "type": "DropDown", "includeBlank": true, "helperText": "PCodes FTW!", "options": { "No oe": "NA", "My1": "One", "My2": "Two", "My3": "three" }, "value": "One" }

One of the key concepts for me was to learn that the value field on the Select element should be pointed at an item in this.state. Then, the onChange needs to pass the name of that state variable (which, confusingly, I have named 'value') to the eventHandler function.

The double arrow function header (curried function) of the handleSelectChange function still confuses me... (I don't understand how the 'event' property is getting there, given I'm calling this function with a single parameter)... but this works for now and I can try to refactor into syntax I am comfortable with (ie: function(a, b) { *do something* } ) at some future date. (yeah....)

Improve this answer

Comments

0

Add class radio_label :

<FormControlLabel value="male" label="Male" control={<Radio />} className="radio_label"/>

Add css property :

.radio_label{ color:black }
Improve this answer

1 Comment

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.