testing-library / testing-library/user-event
Multiple `listbox` - `deselectOptions` util should check for `aria-multiselectable`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Reproduction example
https://codesandbox.io/p/sandbox/musing-panini-c5399j?file=%2Fsrc%2FApp.test.js
Prerequisites
- Render a multiple
listbox - Select some options
- Now deselect option(s) from multiple
listbox(using deselectOptions)
Expected behavior
from - https://testing-library.com/docs/user-event/utility/#-selectoptions-deselectoptions
Select/deselect the given options in an HTMLSelectElement or listbox.
I should be able to deselect options from multiple listbox using deselectOptions
https://github.com/testing-library/user-event/blob/main/src/utility/selectOptions.ts#L28
The deselectOptions function is not checking for aria-multiselectable (for multiple listbox)
It does check for multiple though (for multiple select)
Actual behavior
You won't be able to deselct the option(s) from multiple listbox using deselectOptions
User-event version
14.1.1
Environment
The issue is reproducible on codesandbox
I have used the provided codesandbox template
additionally I have used https://mui.com/material-ui/ (mui needs emotion)
"@mui/material": "6.1.7",
"@emotion/styled": "11.13.0",
"@emotion/react": "11.13.3"
Additional context
For more context see this thread on MUI repo
https://github.com/mui/material-ui/issues/44417#issuecomment-2479742130
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/utility/selectOptions.ts around the referenced line and reproduce the behavior with the provided CodeSandbox. Compare the existing multiple-select handling with the aria-multiselectable listbox case. Done means deselectOptions can remove selected options from a multiple listbox while preserving the existing HTMLSelectElement behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing-qa
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 70/100