ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

[ic-select searchable]: Safari: When pressing tab on ic-menu, the select input loses focus

Open jd239 opened this issue 1 year ago • 0 comments

Summary of the bug

When the ic-menu appears underneath the ic-select to display a list of menu items, and the user is interacting with the ic-menu, pressing Tab removes the focus from the select input. This behaviour is different to Chrome.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

  1. Go to page: https://mi6.github.io/ic-ui-kit/branches/develop/web-components/?path=/story/web-components-select-searchable--default-story
  2. Click on the select input to display menu
  3. Press down on the arrow key to highlight menu options
  4. Press Tab
  5. See focus removed from select input

📸 Screenshots or code

N/A

🖥 📱 Device

  • Type: Desktop
  • Device: Windows VM
  • OS version: Windows
  • Browser version: Safari 17

🧐 Expected behaviour

The menu should close and the focus remains on the select input

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given the page displays an ic-select searchable component When the user clicks on ic-select, presses the down arrow key and then Tab
Then the focus should remain on the select component and the ic-menu should close

Additional info

Tell us anything else useful to help us fix or understand the problem.

jd239 avatar Jul 19 '24 09:07 jd239