blueprint
blueprint copied to clipboard
palantir
MultiSelect and MultiSelect2 interrupts a11y focus order
Environment
-
Package version(s):
@blueprintjs/core ^4.6.1,@blueprintjs/select: ^4.5.0 - Operating System: macOS Monterey Version 12.4
- Browser name and version: Safari Version 15.5 (17613.2.7.1.8)
Code Sandbox
Link to a minimal repro (fork this code sandbox): https://blueprintjs.com/docs/#select/multi-select2 https://blueprintjs.com/docs/#select/select2
Steps to reproduce
- Set focus on the example MultiSelect2 component container div via mouse click
- Cycle through page elements via tab key
Actual behavior
Focus gets reset to the page's first focusable element.
Expected behavior
The next focusable element within the DOM hierarchy should be focused as in the Select2 component.
Looks like this is only a problem in Safari. I cannot repro this bug in Chrome, Firefox, or Edge. Safari support is very low on the priority list for us, but I would welcome a PR to fix this if you can figure out the issue.
Exact same issue is reproduceable on Chrome and Firefox as well. @rafiazman were you able to find a solution for this? I am stuck in the same situation.
Sorry if I didnt understand this correctly. The issue that I am facing is when you try to move focus from an opened select the focus moves to the top of the page. You can even reproduce it here Steps to reproduce
- Open the dropdown. (Your focus will be in the filter)
- Hit tab key and your focus will move to the top of the page after it has traversed through the list of options. (You can type something in the filter to to empty out the list and then check this easily)
https://github.com/palantir/blueprint/assets/37250472/1542d268-a977-4f40-ad7f-e499141f9ce5
@firzok that's a slightly different bug. Can you please file a new issue for the Select component? The OP in this thread is about the MultiSelect component.