react-admin: react16 SelectArrayInput autocomplete not working

Please do not submit support requests or “How to” questions here. For that, go to StackOverflow.

What you were expecting:

I hope SelectArrayInput can select autocomplete value. What happened instead:

in react 16.0.0 ,SelectArrayInput autocomplete not working Steps to reproduce:

Related code:

            <SelectArrayInput choices={[
                {
                    id:1,
                    name:'xxx'
                },
                {
                    id:2,
                    name:'yyy'
                }
            ]} optionText="name"/>

Other information:

In react15.4,SelectArrayInput autocomplete it’s ok

Environment

Admin-on-rest version:^1.3.2
Last version that did not exhibit the issue (if applicable):15.4
React version:16.0
Browser:chrome
Stack trace (in case of a JS error): no error

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 22 (7 by maintainers)

Commits related to this issue

[RFR] Upgrade material-ui-chip-input Fixes #1139 Fixes #1255 — committed to marmelab/react-admin by djhi 6 years ago

Most upvoted comments

Great workaround @eghernqvist ! Tested and approved 👍

In practice :

<ReferenceArrayInput
          source="peoples"
          reference="Person"
          label="People"
          allowEmpty
        >
          <SelectArrayInput optionText="email" options={{ onBlur: () => {} }} />
</ReferenceArrayInput>

tgeorges on Jan 24, 2018

On React 16.0.0, AoR 1.3.4, Material-ui-chip-input 1.18.5 the issue remains for me.

I managed to make it work now with some trial and error debugging. What made it work was disabling the onBlur function on line 183 in [SelectArrayInput], see theory below.

Here’s what I found: I started off by making my own copy of [SelectArrayInput], and I found that when clicking an element in the list the component triggers handleAdd followed by handleBlur. On line 95 handleAdd calls this.setState, and since handleBlur uses this.state.values for setting the value and handleBlur gets called before the component has received the new values in the state it sets the values immediately to [].

Removing onBlur from [ChipInput] didn’t work, but setting the onBlur function to () => {} seems to do the trick.

Unsure if doing this causes any issues, I couldn’t find any direct problems.

eghernqvist on Jan 24, 2018

Any update on this?

eghernqvist on Dec 5, 2017

stephanembl on Jan 5, 2018

@fzaninotto I’m trying to fix this bug right now. 👍

leMaik on Oct 22, 2017

Hi, I experienced the same issue with react 16.2 & aor 1.3.4 with a very similar use case (referencearrayinput + selectArrayInput). I have double check the version of material chip. Do you have an idea ?

tgeorges on Jan 23, 2018

I have the same issue reproducible with SelectArrayInput inside ReferenceArrayInput. Any updates or workarounds? P.S. It sounds like a bug not enhancement

VTopoliuk on Nov 8, 2017

btw. the commit with this “fix” is still not released so yarn upgrade will not work .)

natrim on Jan 16, 2018

material-ui-chip-input seems to work fine in their storybook for all cases

Yup, no problems with react@16 on our end. 🤔

leMaik on Nov 13, 2017

when i look in redux dev tool it seems to send the redux-form/CHANGE with the value but then it send redux-form/BLUR which removes the value

natrim on Oct 19, 2017