testing-library / testing-library/user-event

Multiple `listbox` - `deselectOptions` util should check for `aria-multiselectable`

Open Beginner friendly
#1,240 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

accuracy
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
  1. Render a multiple listbox
  2. Select some options
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.