React-admin: react16 SelectArrayInput autocomplete not working

[xiaomingplus]

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

[djhi]

https://github.com/callemall/material-ui/releases/tag/v0.19.4 is now compatible with React 16. We should be able to make the move too

[fzaninotto]

I think this is dependent on an upgrade of material-ui-chip-input to work with React 16. Can you also report the bug to https://github.com/TeamWertarbyte/material-ui-chip-input?

[djhi]

It already has been updated to support r16

[fzaninotto]

It still doesn't work with react 16 and material-ui-chip-input 0.18.1 (tested on the next branch). So the problem lies in the material-ui-chip-input package IMO.

[natrim]

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

[leMaik]

@fzaninotto I'm trying to fix this bug right now. :+1:

[VTopoliuk]

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

[leMaik]

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

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

[VTopoliuk]

@natrim nice investigation!

[eghernqvist]

Any update on this?

[samhiddenhand]

Just curious if there's at least a workaround discovered for this in the meantime?

[stephanemombuleau]

+1

[bevinhex]

For the moment as a work around, you can use CheckboxGroupInput, it is working for me

[llioor]

Same issue here... checkbox can not be a solution for me. I have 50+ choices
@djhi it is not an enhancement, it is a bug because BLUR remove the selected value.

[llioor]

I run yarn upgrade and update all versions.
It is still not working on my side.

<ReferenceArrayInput label="Managers" source="managers_ids" reference="admin/managers"
                                 allowEmpty>
              <SelectArrayInput  optionText={optionManagersRenderer}/>
            </ReferenceArrayInput>

Here is a video of the Redux log: https://ufile.io/qdivw

When I change to <CheckboxGroupInput> it is working and saving all data.

[djhi]

Can you provide a codesandbox reproducing the issue ?

[llioor]

Hi @djhi
This is the same project as I sent you today: https://bitbucket.org/llioor/aor-test/src
You can see on edit I have the Select and on the create I have the Checkbox under "src/views/pages/Chatrooms/Chatrooms.js"
We don't have the same API so it will be problematic for you.
I added another video to show the checkbox: https://ufile.io/xinhz

[natrim]

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

[llioor]

@natrim Thank for the update.. actually I didn't see it.. I just saw this case was closed yesterday and that the version was merged.

merged 1 commit into master from fix_mui_chip_input a day ago

@fzaninotto maybe we can keep it open until the fix will be released, like this we all be notified about it.

[tgeorges]

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 ?

[eghernqvist]

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.

[tgeorges]

Great workaround @eghernqvist ! Tested and approved 👍

In practice :

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