MultiSelect cannot be closed via keyboard

[jrpomeroy]

Environment

Operating system

OSX

Browser

Latest Chrome

Automated testing tool and ruleset

IBM CI 162 Checkpoint Violation: IBM 2.1.1 Keyboard
IBM Guidance: https://www.ibm.com/able/guidelines/ci162/keyboard.html
Test Tool Type: Manual test

Detailed description

Unable to close the MultiSelect menu with keyboard. If you use the Escape key the menu will close but also appears to remove selection.

What version of the Carbon Design System are you using?

[email protected]

What did you expect to happen?

Menu can close while also maintaining selected items.

What happened instead?

Menu closes with Escape key but selection removed (or at least appears that way).

What WCAG 2.1 checkpoint does the issue violate?

IBM CI 162 Checkpoint Violation: IBM 2.1.1 Keyboard

Steps to reproduce the issue

1. Go to https://react.carbondesignsystem.com/?path=/story/multiselect--filterable
2. Use keyboard to navigate into MultiSelect dropdown and select an item
3. Press escape key, or otherwise try to navigate out and keep the selection

Please create a reduced test case in CodeSandbox

Hopefully the storybook example is enough to reproduce.

Additional information

Original issue here:
https://github.ibm.com/alchemy-containers/armada-ui/issues/5904

[mashenka123]

@joshblack Could you please confirm when it could be triaged? We need the fix this month, could you please help kindly support? Thank you very much!

[tw15egan]

Would the intended behavior be that the menu can be closed via the esc key, and not remove the selected items?

[tw15egan]

Our downshift dependency may need to be updated to 6.0.0

downshift-js/downshift#719

[xiepingp]

Would the intended behavior be that the menu can be closed via the esc key, and not remove the selected items?

@tw15egan, yes, I think it is acceptable.
Current behaviour is that if user presses ESC, the selection will be removed along with the dropdown menu.

Do you have any plan when to update your downshift dependency? We need to fix the issue this month, would you please kindly take a look? Thanks a lot!!

[dakahn]

just jumping in to confirm this is Downshift functionality. On close menu/focus move text input is replace with empty string. We're discussing this here

[mashenka123]

@dakahn So what's the idea for this bug now?

[dakahn]

The bug has been prioritized and moved to our back log. Watch this space for updates. Thanks @mashenka123

[mashenka123]

@dakahn Do you know when this would be fixed?

[dakahn]

Can't give you an ETA, sorry

[dakahn]

This issues appears to be resolved testing on Windows 10 in both Chrome and Firefox against our sandbox.

[joshblack]

Going to close this out since the behavior seems to have been fixed. Feel free to comment and I can re-open!

[xiepingp]

Thanks for the fixing! Now the multiselect can be closed by pressing esc and the selections are kept well in https://react.carbondesignsystem.com/?path=/story/multiselect--default.
But I tried in https://react.carbondesignsystem.com/iframe.html?id=multiselect--filterable, press esc key will remove all the selections:
press up/down arrow and enter to select options:

press esc, all the selections are removed

If press Tab, the multiselect will not be closed which is same as before....
@joshblack , would you please reopen and have a look?

[joshblack]

@xiepingp I went ahead and opened up an issue for this (and some other issues) over in: #7861

[xiepingp]

Thanks for the information 😄