Skip to content

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

Description

@AndrewSwerlick
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions