Material-ui's Menu Item not working with a Select within a redux-form Field (redux form 8.2)

Question

I'm trying to create a select (dropdown) using Material-UI within a redux-form. There's an example for using M-UI's selects within a redux form on their website.

I'd like to do the same type of example except using Material UI's MenuItem's instead of the option tags used in the example.

It seems as though simply replacing the options with MenuItems does not work, and the MenuItems do not appear under the children for the select field. I have gotten this to work with options:

Here is the renderSelectField used to create the select component. This is working:

renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
    <FormControl className={this.props.classes.formControl} error={touched && error}>
        <InputLabel>{label}</InputLabel>
        <Select
            native
            {...input}
            {...custom}
        >
            {children}
        </Select>
        {this.renderFormHelper({ touched, error })}
    </FormControl>
)

And here is the render:

render() {
    return (
        <div>
            <form onSubmit={this.props.handleSubmit(this.props.submitForm)}>
                <Field name={"sheetType"} component={this.renderSelectField} label={"Sheet Type"}>
                    <MenuItem value={"basic"} primaryText={"Basic"}>Basic</MenuItem>
                    <MenuItem value={"advanced"} primaryText={"Advanced"}>Advanced</MenuItem>
                </Field>
                <Button onClick={this.props.onCancel}>Cancel</Button>
                <Button type="submit" color={"secondary"}>Next</Button>
            </form>
        </div>
    )
}

I expect there to be two dropdown menu items passed in as the children of MenuItem, but i believe there needs to be some property passed into MenuItem itself.

Replacing menu item with option tags work.

awran5 awran5 · Accepted Answer · 2019-07-10T17:31:42

You are mixing between simple Select and native Select. If you going to use native change <MenuItem> to <option> otherwise just remove native property.

Native pattern:

<Select native>
    <option value="item">item</option>
</Select>

Simple Select pattern:

<Select>
    <MenuItem value="item">item</MenuItem>
</Select>

Material-ui's Menu Item not working with a Select within a redux-form Field (redux form 8.2)

1 Answers