[Autocomplete] - resetInput when value reference changes

[omerp-explorium]

material-ui/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js

Line 199 in 3f8c1a4

const valueChange = value !== prevValue.current;

Sometimes the value is an array (When autocomplete is multiple), So if after render the value does not referentially the same, the autocomplete will fire reset event.
For example

<Autocomplete value={values.filter(x => isSelected(x.value))}

The Bug/question is, shouldn't we check if the reference is the same for each item in case of multiple?

Thanks

[michaldudak]

Could you please provide a codesandbox so we can reproduce the problem?

[omerp-explorium]

Sure. on it

[omerp-explorium]

There you go :) @michaldudak

https://codesandbox.io/s/focused-chaum-74j0g2?file=/demo.tsx

[michaldudak]

So if I understand you correctly, your Autocomplete component resets its value, yes? Could you provide the steps I should take to reproduce the issue on the sandbox you provided?

[omerp-explorium]

the inputValue resets.
Just type in the search anything and it will reset immediately.

It happens because the value which is an array, shallowly equal the prev value but isn't referentially equals.

[Zikoat]

It seems like the input breaks when the value doesn't have referential equality between rerenders. There are 2 fixes for this:

1. Restructure your code so the controlled variable value from onChange does not change referential equality. In @omerp-explorium's case:

-export function Tags({initialIds}) {
-  const [films, setFilms] = React.useState(top100Films.filter(film=>initialIds.includes(film.year)));
- ...
- value={map(ids, (id) => find(top100Films, { year: id }))}
- onChange={(e, next) => {
-   setIds(map(next, (x) => x.year));
- }}
+ export default function Tags() {
+  const [ids, setIds] = React.useState([]);
+ ...
+ value={films}
+ onChange={(e, next) => {
+   setFilms(next);
+ }}

2. Use useMemo to keep referential equality when the variable changes

const [ids, setIds] = React.useState([]);
const cachedIds = React.useMemo(
  ()=>map(ids, (id) => find(top100Films, { year: id })),
  [ids]
);
...
value={cachedIds}
onChange={(e, next) => {
  setIds(map(next, (x) => x.year));
}}

@michaldudak To fix this, the line referenced in the question should be changed to use shallowEquals or deepEquals.
Otherwise you would have to do some larger restructurings in useAutocomplete to not send a "reset" onInputChange, but i don't know how a solution for that would look.
You could also try to detect this by checking if you send an input event at the same time as a reset event, but i think the reset event gets triggered as an effect, so they don't happen at the same exact time.

The easiest would probably be to add this requirement to the docs, optionally with a fix using useMemo like i have done above.

[michaldudak]

Thanks for investigating the issue, @Zikoat. We will have this fixed when we refactor the useAutocomplete implementation to use Base UI building blocks, but we don't have an ETA for this.
For now, I'll add a note in the docs.