Redux-form-material-ui - use Select with onChange

Question

I'm using redux-form-material-ui 5.0.0-beta.2 which is compatible with material ui v1.

I want to have a Select component where I can activate an onChange event when a choice is made, and I want the selected value to show in the Select field (as it should). If I use the redux-form-material-ui Select component I get the error:

Cannot read property 'onChange' of undefined 

I can reproduce it by taking the example on how to use redux-form with material ui here and replace the SelectField with redux-form-material-ui Select and put {children} between the open and close tag. You can see the same error:

Code example

^^ If you open this in Chrome you get the "Cannot read property 'onChange'.." error, but in Firefox it says "_ref$input is undefined".

Can this be fixed in some way:

import { Select } from 'redux-form-material-ui';

const renderSelectField = (
  { input, label, meta: { touched, error }, children, ...custom },
) => (
    <Select 
      errorText={touched && error}
      {...input}
      onChange={(event, index, value) => input.onChange(value)}

      {...custom}
    >
      {children}
    </Select>
); 
const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>

      <div>
        <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >
          <MenuItem value="ff0000" primaryText="Red" />
          <MenuItem value="00ff00" primaryText="Green" />
          <MenuItem value="0000ff" primaryText="Blue" />
        </Field>
      </div>

//code continues..

If I try a simpler approach using the example on redux-form-material-ui: redux-form-material-ui/tree/5.0

<Field 
    name="plan" 
    component={Select}
    onChange={(event, index, value) => input.onChange(value)} 
    placeholder="Select a plan"
>
    <MenuItem value="monthly">Monthly</MenuItem>
    <MenuItem value="yearly">Yearly</MenuItem>
    <MenuItem value="lifetime">Lifetime</MenuItem>
  </Field>

But it doesn't work if I add the onChange. When doing a selection it says:

props.input is undefined

Answer 1

You probably looked up the example in official Redux Form docs, but, just how it has been mentioned in the comment, they used SelectedField instead of Select component.

SelectField implements onChange method with 3 arguments, however Select uses just one. Use this instead.

onChange={value => input.onChange(value)}