What you were expecting:
The SelectInput onChange should to be called with an event, not a malformed object created from the current value.
What happened instead:
The onChange function is called with object created when redux-form tries to assign a new property to the SelectInput's value. e.g. Object.assign({}, value, { preventDefault: () => {} })
TextInput displays the correct behaviour.
Steps to reproduce:
https://codesandbox.io/s/simple-vzbum
Go to customRouteLayout.js and #/customRoute2
Look at the console when changing the SelectInput compared to the TextInput
Related code:
Doesn't work correctly:
<SelectInput
source="value"
choices={[{ name: "foo", id: "foo" }, { name: "bar", id: "bar" }]}
onChange={value => console.log(value)}
/>
Works Correctly:
<TextInput onChange={value => console.log(value)} />
Environment
This is a bug of redux-form that was fixed in v8, but the latest react-admin v2 is locked to redux-form v7. Another way to detect the changes in a SelectInput would be to watch the @@redux-form/CHANGE action.
React Admin v3 will have react-final-form instead of redux-form, that will be the opportunity to fix/change this API.
Right - this bug will only be fixed in v3.
Fixed in v3
If it can help someone that don't want to watch @@redux-form/CHANGE action. Passing onChange through inputProps seems to works well. Tested from <ReferenceInput /> and <SelectInput />
<ReferenceInput
inputProps={{
onChange: (e) => {
// Do custom stuff...
console.log(e.target.value);
// Don't forget to push value to Redux Form
dispatch(change(REDUX_FORM_NAME, 'XXX_FIELD_SOURCE', e.target.value));
}
}}
>
<SelectInput />
</ReferenceInput>
Most helpful comment
If it can help someone that don't want to watch
@@redux-form/CHANGEaction. PassingonChangethroughinputPropsseems to works well. Tested from<ReferenceInput />and<SelectInput />