dispatch a custom action on redux-form when onchange select

Question

Given a custom component:

export const RenderDropDown = (props) => {
    const {values, input, label, type, meta: {touched, error, active}} = props;

    var options = function (value, index) {
        return <Option key={index}
                       value={value} />
    };

    return(
        <div>
        <select {...input}>
            <option value="">--- Select a nationality ---</option>
            {values.map(options)}
        </select>
        </div>
    )
}

Wrapped in a Redux-form Field component

<Field name="nationality" component={RenderDropDown} values={props.nationalities}/>

I want that when select fires "onChange" event, a custom action is dispatched besides the Redux-form action (AKA @@redux-form/change)

How I can achieve this?

I tried to pass by props the function to call and set an onChange handler on <select> tag but this overrides the redux-form onChange.

Any help appreciated!

Answer 1

You need to call the redux-form onChange manually in your own custom onChange to update the redux-form value. Like so:

const { onChange, ... } = props;
...
<select onChange={(e) => {
    const val = e.target.value
    // whatever stuff you want to do
    onChange(val)
}} />