React-admin: SelectInput onChange isn't called with an event

Created on 24 May 2019  路  5Comments  路  Source: marmelab/react-admin

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

  • React-admin version: latest
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.3
  • Browser: Chrome
  • Stack trace (in case of a JS error):
bug

Most helpful comment

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>

All 5 comments

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>
Was this page helpful?
0 / 5 - 0 ratings