[Combobox] Using mouse to remove a selected item can fail when the combobox is vertically centered

[Jokinen]

Describe the bug

This is very specific behaviour, but I'm reporting it in order to document this scenario.

When the user has focused the input of the combobox and then uses their mouse to remove a selection, the focus changes from the input into the selected tag. Because the input is only visible when it is focused, the input is hidden. This changes the height of the combobox itself.

This means that the height of the wrapping element may also change. If this container, or the combobox itself, are centered or bottom aligned, the input will move on the screen. The shift may be large enough to cause the selected items to move from under the cursor. In this case the click event won't fire, because the user is mouseupping on another element than the selected item they attempted to delete.

How to reproduce

1. Use combobox in a flex container that center's its children vertically
2. Select an item
3. Focus input
4. Use mouse to remove item
   • To get a better sense of how the UI shifts, mousedown for a while and only then mouseup
5. Expect removal to fail

Expected behavior

It should be possible to remove selected items by clicking even within a vertically centered container.

Possible solution

I don't know what's the most appropriate technical solution, but its goal should likely be to keep the input visible while elements are being removed by clicking.