Collapsible listbox with multiple (and groups) looses focus when making a selection

Problem

Esc does not work after selecting an item when there are groups. Focus is lost from the dropdown content.

Oh, very interesting @danmh. Seems a multiple collapsible listbox isn't very keyboard-friendly when selecting items. It completely looses focus. gitlab-org/gitlab-ui!4033 (comment 1822726234)

@thutterer it is interesting that our integration tests did not catch this issues as we have one for this specific case https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/cypress/e2e/listbox.cy.js#L57 gitlab-org/gitlab-ui!4033 (comment 1825392572)

Steps to reproduce

  1. View a collapsible-listbox story that contains groups, and allows multiple selections, for example Groups
  2. Use the keyboard to open the dropdown
  3. Use the keyboard to select an additional option (for example main)
  4. Dropdown loses focus, Esc can not close dropdown
Edited by Dan MH