downshift-js / downshift-js/downshift
When using useMultipleSelection with either useSelect aria updates for adding items don't work
- 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
Assessment
This issue has not been assessed yet.