AutocompleteArrayInput wrong behavior on input changes

[edulecca]

What you were expecting:
AutomcompleteArrayInput should not log any React warnings on component input value changes related to useMemo or useEffect hooks.

What happened instead:
Every time the AutomcompleteArrayInput gets a new value or some of them are deleted, so on every component's update, the console log 2 warning related to useMemo and useEffect

Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

Previous: [collector, compulsive, returns, function (value) {
    return choices.find(function (choice) {
      return lodash_get__WEBPACK_IMPORTED_MODULE_3___default()(choice, optionValue) === value;
    });
  }]
Incoming: [collector, compulsive, function (value) {
    return choices.find(function (choice) {
      return lodash_get__WEBPACK_IMPORTED_MODULE_3___default()(choice, optionValue) === value;
    });
  }]
.......

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Previous: [collector, compulsive, returns, function (eventOrValue) {
    var event = eventOrValue;
    var value = event.target ? event.target.value : eventOrValue;
    setFilterValue(value);

    if (setFilter) {
      setFilter(value);
    }
  }]
Incoming: [collector, compulsive, function (eventOrValue) {
    var event = eventOrValue;
    var value = event.target ? event.target.value : eventOrValue;
    setFilterValue(value);

    if (setFilter) {
      setFilter(value);
    }
  }]
.....

Steps to reproduce:
Ir order to reproduce the issue just import AutocompleteArrayInput and use it within a wrapper or just without it and passing directiley the choices with a constant.

Related code:
Just replace on examples/demo/src/visitors/SegmentsInput.tsx the <SelectArrayInput/> to <AutocompleteArrayInput/> and will get the warnings.

Other information:
There is a note on the component

    // We must reset the filter every time the value changes to ensure we
    // display at least some choices even if the input has a value.
    // Otherwise, it would only display the currently selected one and the user
    // would have to first clear the input before seeing any other choices
    useEffect(() => {
        handleFilterChange('');
    }, [...values, handleFilterChange]);``

couldnt figure it out if the "reset the filter" is afecting the hooks behaivor

Environment
node v13.12.0
ra-admin 3.4.2
OS OSX 10.15.4
chrome 81.0.4044.113

[wdencker]

I am getting these console errors as well. @edulecca Did you find a solution?

[edulecca]

@wdencker no I don't

[djhi]

Reproduced in the simple example. The <TagReferenceInput> component in the PostEdit.js file does log a lot of warnings

[helenwilliamson]

Hey.

We're also seeing the same issue. Is there a fix being worked on for this (as it's causing a lot of noise in our tests).

Thanks,

[djhi]

I don't think anyone tried to fix it yet. Feel free to open a pull request

[jonathanpopp]

Any update on a potential fix for this or workaround?

[helenwilliamson]

@djhi can you explain the comment on useEffect? It's not clear to me what behaviour it's trying to ensure.

I've replaced the SelectArrayInput in the demo app with AutocompleteArrayInput and the component appears to render correctly. Unfortunately the issue number mentioned in the test doesn't seem to exist:

react-admin/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx

Line 190 in 89bc76a

describe('Fix issue #1410', () => {

[helenwilliamson]

Assuming the useEffect is required, i've made a PR which removes the warning and has the same behaviour. This uses length on values rather than spreading values, as this means there's a consistent sized array passed to useEffect (and the same thing is done with useMemo)

#5044

[helenwilliamson]

@djhi are you happy with the fix I proposed?

[fzaninotto]

Fixed by #5044