ReduxForm select value option is removed by filter, but option remains selected - select

Question

I'm using Redux-form and I have a normal dropdown
there are 3 options in the list.
option 1
option 2
option 3
I select option 3.
I then go into my filter input field and type 1.
Now the list just contains option 1.
but option 3 is still selected in the form state.
How do I get the form to update and realize that that option isn't in the list anymore and go to default?
There's a couple ways I've though about doing it but not sure what's best.
I could write some state change logic in formReducer.plugin with an /CHANGE action type and filter field.
I could perhaps call onChange event on the select whenever I type in filter field.
I could always check in the select component render function if the current states selected value is in the list and if not, call a redux-form change action on the select to undefined.
r something better???

Answer 1

If you are using some component for your select, then you need to override the onChange prop to make sure your component gets the onChange event as well as the redux-form field input.
export const renderSelect = ({input, meta: { touched, error }, ...rest}) => {
return <Form.Select {...input} {...rest}
onChange={ (event, data) => { input.onChange(data.value);}}
/>
};
const MyFormComponent = (props) => {
const {brandData, productData, groupData} = props.optionsData;
return (
<Form>
<Field name='brandData' options={brandData} component={renderSelect}/>
<Field name='productData' options={productData} component={renderSelect}/>
<Field name='groupData' options={groupData} component={renderSelect}/>
</Form>
);
};
You can see a similar thing done in the redux-form example for integrating with 3rd party form components in their material-ui example.