Redux-form-material-ui: Select field selection stops working on specifying onChange handler on the SelectField

[ishwinder]

In the example .. Just changed the following:

<Field
            name="driver"
            component={SelectField}
            hintText="Driver"
            **onChange={this.handleSelectChange.bind(this)}**
            floatingLabelText="Driver">
            <MenuItem value="[email protected]" primaryText="Alice"/>
            <MenuItem value="[email protected]" primaryText="Bob"/>
            <MenuItem value="[email protected]" primaryText="Carl"/>
          </Field>

The onChange Handler returns the value as :

handleSelectChange(value) {
    return value
  }

Result : The selected item doesn't update anymore. Any suggestions ?

[erikras]

Yes, you can't do this. You are overriding the onChange that comes from redux-form, thus disconnecting the input from Redux.

I think that if you want to hijack onChange to run some code when it happens, you are precluded from using the component from this library. You will have to do what it does, some remapping of onChange and errors, manually and use the SelectField from Material UI directly.

[adamtal3]

@erikras - Can't you check if typeof props.onChange === 'function' and call it inside your onChange handler?

[adamtal3]

This is how I wrap my SelectField using this repository and allowing an onChange handler:

import SelectField from 'material-ui/SelectField';
import mapError from 'redux-form-material-ui/lib/mapError';
import createComponent from 'redux-form-material-ui/lib/createComponent';

const SelectFieldWrapper = createComponent(SelectField, ({ input: { onChange, ...inputProps },
  active, asyncValidating, dirty, invalid, pristine, valid, visited, ...props }) =>
  ({...mapError(props), ...inputProps, onChange: (event, index, value) => {
    onChange(value);
    if (props.onChange) props.onChange(value); // <-- This allows the user to add onChange
  }}));

[adamtal3]

For some reason, my solution stopped working for me. The props.onChange seems to be always undefined.

To solve it I'm now passing onChangeCallback instead of onChange and I use blacklist to remove it from the props being passed to the div:

import SelectField from 'material-ui/SelectField';
import mapError from 'redux-form-material-ui/lib/mapError';
import createComponent from 'redux-form-material-ui/lib/createComponent';
import blacklist from 'blacklist';

const SelectFieldWrapper = createComponent(SelectField, ({ input: { onChange, ...inputProps },
  active, asyncValidating, dirty, invalid, pristine, valid, visited, ...props }) =>
  ({...mapError(blacklist(props, 'onChangeCallback')), ...inputProps, onChange: (event, index, value) => {
    onChange(value);
    if (props.onChangeCallback) props.onChangeCallback(value);
  }}));

[adamtal3]

Somehow I missed it but it seems to be natively supported now by this library: https://github.com/erikras/redux-form-material-ui/commit/2ddbc1968ec3b818d06658d6bc121d8d103b0ccc