downshift-js / downshift-js/downshift

When using useMultipleSelection with either useSelect aria updates for adding items don't work

Open
#1,298 1 comment 2 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

- `downshift` version: 6.0.5
- `node` version: 10.20.1
- `npm` (or `yarn`) version: (unsure, can replicate in code sandbox)

**Relevant code or config**

Can replicate in this code sandbox example https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useMultipleSelection/select.js

**What you did**:

Use the example above to select multiple items.

**What happened**:

No aria-live messages showed up when adding items to the selection. Aria-live messages only showed up when removing items.

**Reproduction repository**:

https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/hooks/useMultipleSelection/select.js

**Problem description**:

I would expect that aria live messages show up both when adding items to a selection, and removing them. Interestingly, if I comment out lines 39 and 40 in the `onStateChange` function the message starts to show up

```javascript
onStateChange: ({type, selectedItem}) => {
switch (type) {
case useSelect.stateChangeTypes.MenuKeyDownEnter:
case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
case useSelect.stateChangeTypes.ItemClick:
case useSelect.stateChangeTypes.MenuBlur:
if (selectedItem) {
//addSelectedItem(selectedItem)
//selectItem(null)
}
break
default:
break
}
},
```

So something about calling those two mutative functions messes up the code that detects that an aria update is required.

**Suggested solution**:

Unsure, I dug around in those functions but couldn't identify anything obvious

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.