downshift icon indicating copy to clipboard operation
downshift copied to clipboard

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

Open AndrewSwerlick opened this issue 3 years ago • 1 comments

  • 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

    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

AndrewSwerlick avatar Jul 29 '21 20:07 AndrewSwerlick

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

silviuaavram avatar Dec 19 '22 15:12 silviuaavram