[Autocomplete] Multiple async selection + react-hook-form causes inconsistent view

[Michele-Masciave]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/zlgt6x
2. Type on the autocomplete
3. Select some options

Current behavior

1. The current text is not visible on typing
2. The selected options are not visible as chips once selected

Expected behavior

1. The current text is visible on typing
2. The selected options are visible as chips once selected

Context

I'm implementing an async type ahead using the Autocomplete component and react-hook-form. While for the static standard/multiple implementation it was quite straight, I'm dealing with the following issue for the async multiple case.

The value looks not consistent between the Form and the view.
Besides the debounce logic that can be simplified, I tried also to save the selected values onChange in a new state to simultaneously maintain value and options, but I'm still not able to see the selected options in the autocomplete.

Your environment

Running on a nodebox.

react: 18.2
mui/material: 6.1.8
react-hook-form: 7.46.1
browser: Chrome (Version 131.0.6778.86 (Official Build) (64-bit))

Search keywords: autocomplete, multiple, react-hook-form

[Harsh517-tech415]

hey can you please assign this issue to me, still this i tried to solve it.
Thanks

[Harsh517-tech415]

Fixed
Text Visibility: The issue where the text wasn’t visible while typing was resolved by manually handling the inputValue in the onInputChange event.
Selected Chips: The issue where selected options weren’t displayed as chips was fixed by moving {params.InputProps.startAdornment} outside the condition in renderInput, ensuring chips are consistently visible.
You can check the updated behavior here: [Fixed Sandbox Link]

Let me know if you have any further questions!

[mj12albert]

@Harsh517-tech415 Hey thanks for investigating this ~

In your sandbox, there is a tiny bug here on this line: https://codesandbox.io/p/sandbox/autocomplete-rhf-forked-35mn47?file=%2Fsrc%2Fhelpers%2FuseDebounceHook.ts%3A28%2C19-28%2C63

-delay: (prev as DebounceSearch).delay - 100,
+delay: (prev as DebounceSearch)?.delay - 100,

Otherwise, it does seems to fix this:

Current behavior
The current text is not visible on typing
The selected options are not visible as chips once selected

@Michele-Masciave does this work for you?

[Michele-Masciave]

Thanks both @mj12albert @Harsh517-tech415 it (almost) works for me... what I still noticed is that it is possible to select an already selected option, but I think that I can figure out how to fix it.

[Michele-Masciave]

Playing with filterOptions the problem mentioned above is solved.

      filterOptions={(currentOptions) =>
        currentOptions.filter(
          (item2) =>
            !selectedOptions.some((item1) =>
              typeof item1 === "string" || typeof item2 === "string"
                ? item1 === item2
                : item1.value === item2.value
            )
        )
      }

[Harsh517-tech415]

great 👍

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Michele-Masciave How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.