CODEWITHSUNDEEP
javascriptreactjsdrop-down-menumaterial-uiredux-form
Patrickkx
Patrickkx

Reputation: 1870

Unexpected behavior with material ui Select and 'redux-form'

I have a simple 'redux form' with a Select component from newest material-ui-next.

import { TextField } from 'material-ui';

<Field
   name="name"
   component={TextField}
   select
>
   <MenuItem value={1}>Lily</MenuItem>
   <MenuItem value={2}>Mark</MenuItem>
</Field>

Works fine. Hovewer, if I change the value prop from typeof number to string, e.g.

<Field
   name="name"
   component={TextField}
   select
>
   <MenuItem value="lily">Lily</MenuItem>
   <MenuItem value="mark">Mark</MenuItem>
</Field>

the value changes properly, but just after one second, the value becomes 0 (as it was initially), and the selected value disappears (it's empty from now on). It had a correct value just for a moment, but somehow it's being automatically set back to 0.

Even tried with rendering the field:

const renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
  <TextField
    {...input}
    select
    onChange={(event, index, value) => input.onChange(event.target.value)}
    children={children}
    {...custom}
  />
)

Still, it changes the value, and just after that it returns to 0. If I console.log the form values, it shows up (after manually changing the value):

{ name: "Lily" }
{ name: 0 }
{ name: 0 }

(it happens in period of one second)

Looking forward for any help. Thank you.

Edit: This is what happens in redux dev tools, when choosing an item with string value - in this case pln.

enter image description here

Upvotes: 0

Views: 880

Answers (1)

Ken Gregory
Ken Gregory

Reputation: 7390

Based on this react-select issue and this redux-form issue it seems like you need to override the default onBlur event.

Upvotes: 1

Related Questions