Autocomplete multiselect prevent search from resetting when selecting options

[Boerescu-Razvan]

Latest version

• [X] I have tested the latest version

Current behavior

When using a multiselect autocomplete with many options the available options can be filtered typing a search string in the input. However if one of the options is selected then the search string is reset and the options are no longer filtered, which our users found very inconvenient

Expected behavior

The options filter should not reset when selecting an option on a multiselect autocomplete

Steps to reproduce

No response

Software Version

Rocket-UI: 0.1.45 NPM/YARN: 9.6.7/3.5.0

What browsers are you seeing the problem on?

No response

[DCosti]

This is a normal behavior from the Material-UI Autocomplete component https://mui.com/material-ui/react-autocomplete/#checkboxes

[dragos-rosca]

What you are requesting is a customization. It's a deviation from the normal behavior.

This should not be implemented in the general version of the components. If you need this behavior you can easily achieve this by using the existing properties.

Please implement this in your project as a custom specialization of the component! https://legacy.reactjs.org/docs/composition-vs-inheritance.html#specialization

[Boerescu-Razvan]

While I initially was able to achieve this behavior without modifying the autocomplete component, it turns out this was only possible for the non lazy loading variant. If the autocomplete component uses loadOptions to get its options asynchronously then every time the user clicks on one of the options the handleLoadOptions function is called which creates a bad user experience by hiding the menu and showing a loading bar after each click. This is because every click fires the internal handleInputChange callback which always calls handleLoadOptions. I don't see any reasonable way to override this behavior externally, so I've reopened the issue and submitted another pr, adding a prop preserveSearch to achieve our user's desired behavior and which defaults to false so as to not necessarily deviate from the normal behavior.

[dragos-rosca]

const MyComponent() {
 const [value, setValue] = useState([])

 const [input, setInput] = useState('')
 const handleInputChange = useCallback((_event, value, reason) => {
  if (reason === 'input') setInput(value)
 }, [])

 const {data, loading} = useQuery(YOUR_QUERY, { variables: { input }})

 return (
  <Autocomplete
   value={value}
   onChange={setValue}

   inputValue={input}
   onInputChange={handleInputChange}

   options={data?.options || []}
   loading={loading}
  />
 )
}