ListBox control? Menu has strange behavior on click and mouse over

[jmagaram]

I want to provide a list of items for the user to choose one or more things from, like the built-in HTML select but with size = 10. Unlike the dropdown, I want the list to always be open on the page and to scroll. In my app on a big web page I'm asking the user "Which one(s) do you want? There are filter and sorting controls and a big Ok button for the user to commit their choice. Ideally I could display my choices in a grid with columns, but that isn't essential. Mostly I want the ability to put graphics/text in the list items, possibly have variable row heights, and have good keyboard support for moving up/down through the list and selecting/deselecting items. The other place I want this is where the user is managing a list of things. I show the whole list, the user can select one or more, and there are Delete, Open, and other buttons relevant to the selected item(s). These kinds of lists are everywhere in apps - your email, list of text messages, file names in the macOS Finder, people in your address book, to do items in your to do list, etc. You can render a list without any special control. Just use ul and li items. But for expected behavior you need selection and keyboard navigation and things like shift+click and ctrl+click.

Does Shoelace have such a control for showing a list like this? If not, what are people using? It seems like the menu could do the job.

I experimented with the menu a bit and put arbitrary content into a menu item - not just text - and it seemed to work. Awesome! Is this supported behavior? https://codepen.io/jmagaram/pen/dyqXqeY

Here are examples of list boxes from other web component libraries:

https://component.kitchen/elix/ListBox
https://component.kitchen/elix/MultiSelectListBox
https://fluent-components.azurewebsites.net/?path=/docs/components-listbox--listbox
https://fluent-components.azurewebsites.net/?path=/story/components-listbox--listbox

One weird problem/bug with the menu is that when you click on an item with the mouse it is gray, not the blue highlight color. This is disconcerting. The user clicks on an item to select it but NOTHING noticeable happens. As soon as you move the mouse off the item it turns blue. Actually whenever the mouse is over a selected item the color changes to gray, even if it was blue before. This is really strange. If an item is selected you should always see that it is selected - always that highlight blue color - even if the mouse is on top of it. Another scenario - move the mouse pointer on top of an item so it turns gray. Then press the cursor keys to move the selection up/down. The selection changes to blue everywhere EXCEPT where the mouse it pointing. I'm not sure what the proper behavior here is but maybe the selected item should always be filled in with blue; that should be higher priority than displaying something as gray indicating the mouse is over it.

Here is a fancier data-grid component. I don't need this much capability but it is quite nice, like the check box at the top of the first column for selecting and deselecting everything.

https://react.fluentui.dev/?path=/docs/components-datagrid--default

[claviska]

The control you're looking for is indeed a listbox or a "selectable items" component. I've created a number of these in various frameworks over the years, including functionality such as Select All, Select None, CMD/CTRL + click to select multiple, SHIFT + click to select a range, etc.

I've had this on my internal backlog for awhile, as I use them fairly frequently. Unfortunately, I haven't been able to build it out as a Shoelace component yet.

That said, I don't think menu will be a good substitution. Aside from fighting with its logic, menus are semantically different and screen readers will see them as menus, not listboxes.

This is definitely on my personal wishlist, so it's really just a matter of time before I get to it.

[jmagaram]

Ok thanks for the helpful reply. I've been scanning tons of web component libraries and have been astonished at how many do not include this kind of control. It's been around since the very
beginning like VB 1.0. Microsoft Fluent has it probably because they MUST have it to satisfy Office and other mission critical apps. Elix has a really nice one but the project isn't being supported much and hasn't taken off despite very high quality. Material UI web - by Google no less - I don't think has one. Your library has a very high level of polish. I don't think you need to go full-datagrid - but a flexible list box would be a very useful addition.

[jmagaram]

Actually I've been struggling with the Microsoft Fluent ListBox this morning and am pretty sure at this point that it does not provide events to watch changes to the selection. I also can't seem to put it into multi-select mode. Documentation is terrible. It is about 100kb unzipped. The React version of Fluent ListBox is what Microsoft uses in Office and that has all the features. The web component version seems very limited.

Vaadin list box is probably pretty good. Haven't experimented with it much. But is 143kb unzipped.
Spectrum list box was 240kb or so unzipped.
Elix list box is only 30k unzipped. TypeScript support seems broken to me. But functionally I expect this to work very well.