Clicking focused serchable multiselect doesn't open options dropdown

[slaweet]

Version

• Vue version: both 2 and 3

Description

Actual behaviour

If I focus searchable multiselect in a way that doesn't open the options (e.g. clicking the associated <label/>, or keyboard tab), it's no longer possible to open the options by clicking the focused multiselect. I have to click away to remove the focus and only then it works.

Expected behaviour

Clicking the focused multiselect opens the options (if not already open) in the same way as clicking it non-focused.

Demo

https://jsfiddle.net/xgjokvc5/

[heinebold]

Every searchable Multiselect is affected!

It doesn't even need any special focus methods.

Description

When in a searchable Multiselect you select an option via keyboard (either arrow keys or search), you can't open the dropdown via mouse until you unfocus the Multiselect. In single and multiple modes, not even the caret works. In tags mode, the caret is fine but not clicking the free space/input. Selecting by arrow keys in a non-searchable one doesn't have that problem.

Demo / Steps to Reproduce

This JSFiddle contains searchable Multiselects for all three modes, you can verify it there:

• Click anywhere on a multiselect, you'll see it open
• type a number 1-3
  • or use the arrow keys
• press Enter, the number gets selected
• Click on the same multiselect
  • it doesn't open if you just click anywhere into it
  • in single and multiple mode, not even the caret works
  • in tags mode, the caret works, but not clicking in the free space next to the tags
• unfocus the Multiselect
• click in it again, now it works