downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.02k stars 930 forks source link

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

Open AndrewSwerlick opened 3 years ago

AndrewSwerlick commented 3 years ago

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

    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

silviuaavram commented 1 year ago

The status part needs to be reimplemented. Will keep this open for tracking.