[Autocomplete][material-ui] Missing aria-multiselectable attribute when multiple prop is set

[masonlouchart]

Steps to reproduce

https://stackblitz.com/edit/vitejs-vite-kcvsmw?file=src%2FApp.tsx&view=editor

Current behavior

The Autocomplete component has multiple set to true. React Testing Library deselectOptions fails.

The documentation says:

Selecting multiple options and/or deselecting options of HTMLSelectElement is only possible if multiple is specified.

I expected it to work.

Expected behavior

We can use deselectOptions on an Autocomplete when multiple is set to true.

Context

Please see: https://stackblitz.com/edit/vitejs-vite-kcvsmw?file=src%2FApp.tsx&view=editor This issue is similar to https://github.com/mui/material-ui/issues/38631

Your environment

npx @mui/envinfo

``` System: OS: Linux 5.0 undefined Binaries: Node: 18.20.3 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.7 @mui/material: ^6.1.7 => 6.1.7 @mui/private-theming: 6.1.7 @mui/styled-engine: 6.1.7 @mui/system: 6.1.7 @mui/types: 7.2.19 @mui/utils: 6.1.7 @types/react: ^18.3.12 => 18.3.12 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ~5.6.2 => 5.6.3 ```

Search keywords: autocomplete multiple aria-multiselectable

[mnajdova]

I believe we can do the same that was done in the Select component. Would be be up to create a PR for it?

[yash49]

Hi @mnajdova @masonlouchart 👋

I was about to raise the PR but then I realized that adding aria-multiselectable is not enough.

Why? In this link: https://github.com/testing-library/user-event/blob/main/src/utility/selectOptions.ts#L28 you can see that React Testing Library does not check for aria-multiselectable it only checks for multiple

React Testing Library should check for aria-multiselectable before throwing the error.

---

@masonlouchart there is one hack that you can use

const listBox = screen.getByRole('listbox');

// https://github.com/testing-library/user-event/blob/main/src/utility/selectOptions.ts#L28
(listBox as typeof listBox & {multiple: boolean}).multiple = true

await user.selectOptions(listBox, [options[0], options[1]]);
await user.deselectOptions(listBox, [options[0]]);

Also, in order for the above test to run successfully, you will have to remove filterSelectedOptions

<Autocomplete
  options={['Foo', 'Bar', 'Baz']}
  renderInput={(params) => <TextField {...params} label="Select" />}
  multiple
  // filterSelectedOptions
  disableCloseOnSelect
/>

otherwise your list won't have the option that you are trying to deselect 🙂