[Autocomplete] useAutocomplete - Autocomplete input does not show selected values in multiple mode;inputValue is empty when Autocomplete is in multiple mode.

[340rahul]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create a multi-select Autocomplete component using the useAutocomplete hook from base-ui
2. Selected options do not render in the input field when using the component above

Demo can be seen in the linked codesandbox above

Current behavior

In an Autocomplete created with useAutocomplete hook with multiple mode enabled, the selected options are not rendered in the input field.

Expected behavior

The selected options should be rendered in the input field of the autocomplete.

Context

From what I can tell, this is probably because in resetInputValue function within useAutocomplete.js, the inputValue is set to "" when multiple is true.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 22.5.1 - ~/.nvm/versions/node/v22.5.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.5.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.138
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.27 
    @mui/core-downloads-tracker:  5.15.0 
    @mui/icons-material: ^5.14.14 => 5.14.14 
    @mui/material: ^5.15.0 => 5.15.0 
    @mui/private-theming:  5.15.0 
    @mui/styled-engine:  5.15.0 
    @mui/system:  5.15.0 
    @mui/types:  7.2.11 
    @mui/utils:  5.15.0 
    @mui/x-data-grid:  6.15.0 
    @mui/x-data-grid-premium: ^6.15.0 => 6.15.0 
    @mui/x-data-grid-pro:  6.15.0 
    @mui/x-date-pickers:  6.15.0 
    @mui/x-date-pickers-pro: ^6.15.0 => 6.15.0 
    @mui/x-license-pro:  6.10.2 
    @types/react: 18.2.44 => 18.2.44 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2 

Search keywords: useAutocomplete Autocomplete inputValue

[michaldudak]

When in multiple mode, the Autocomplete does not display its value in the input, but instead lets you render selected values as pills (or whatever you like, really). You can access the values with the value parameter returned from useAutocomplete. See https://mui.com/material-ui/react-autocomplete/#customized-hook for an example.

[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

We value your feedback @340rahul! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!