Expand overflow chip in Multi-Select Combo Box

Flow
1

Is there a way to expand the overflow chip? I figured that if I use the left arrow key that it would “expand” and allow me to navigate through them, but that isn’t the case.

Assume that my dropdown contains 500 objects and that I have selected 10 of them at random intervals. If I want to remove one that is in the overflow chip currently the two options are to:

  • navigate the dropdown (with 500 entries) and find the ones I have selected and unselect, though searchable it’s not optimal for lists of similar entries
  • remove all entries with backspace until I remove the one I want and then re-add the ones I didn’t want to remove

IMO it’s not user-friendly or accessible as it is now.

2

Workaround: make your input field wide enough - then you can see multiple values and can navigate between them with the arrow keys and delete the selected value with backspace

3

Sadly this does not work in our case where we use this component in a 2 column form. At least not without a larger change to our design which I don’t think we are interested in at this point.

4

You should at least create a GitHub issue in Issues · vaadin/web-components · GitHub

5

Will do, was hoping for some hidden way of resolving this.

6

@vital-koala would you call this a bug report or feature request?

7

Or A11y issue :slightly_smiling_face:

8

yes

9

I mean, take your pick

10

:+1:

11

This sounds more like an enhancement and not like an a11y issue

12

Yeah, probably. It’s a little bit a question about framing - is it “this is not working very well and there should be a way to see these items” is more like a bug report, “I want it to behave in a specific way” is more of a feature request

13

and while it probably doesn’t technically fall under the umbrella of a11y, it is very literally making the component less accessible to everyone

14

(albeit in somewhat special circumstances)

15

I’ll go for a feature request and see if I can get some nice labels added to it :slightly_smiling_face:

16

Yeah, the important part is that it’s written down so that other people will find it as well

17

Yup, and I’ll link the issue here in a minute as well so that if anyone searches here they’ll find it

18

https://github.com/vaadin/web-components/issues/4614