mui/material-ui

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

Opened this issue · 2 comments

masonlouchart commented

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 #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 commented

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 commented

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 🙂

  • 👍1