multi-select component

[stefanloerwald]

Hi,

are there plans for adding a multi-select component? Maybe based on https://github.com/SamProf/MatBlazor/issues/336?

Thanks Stefan

[stefanloerwald]

Actually, there are a few issues with that code. A better basis would probably be https://material.angular.io/components/select/overview#multiple-selection

[lindespang]

@stefanloerwald Not that I know of, but I agree it would be nice to have one

[stefanloerwald]

FYI: I'm working on this component, hoping to share an initial version soon

[stefanloerwald]

I have an initial version working. You can have a look at it here.

Known issues:

• the menu closes on any interaction. This should probably be configurable, with default non-closing https://github.com/stefanloerwald/MatBlazor/issues/1
• ~~labels of the checkboxes in the menu are not clickable. This is likely to be a CSS issue that comes from the combination of MDC menu + MatCheckbox~~ https://github.com/stefanloerwald/MatBlazor/issues/2
• ~~State of "Select all" checkbox does not correctly change from indeterminate to false/true when the user manually selects none/all items~~ https://github.com/stefanloerwald/MatBlazor/issues/3 This is actually https://github.com/SamProf/MatBlazor/issues/658
• ~~The text "Select all" is hardcoded and should be replaceable, at least for internationalization~~ https://github.com/stefanloerwald/MatBlazor/issues/4

Further improvements should/could be:

• ~~The selected items are displayed semicolon separated. That separator should be configurable~~ (https://github.com/stefanloerwald/MatBlazor/issues/5)
• The component MatMultiOption should really just be MatOption, such that switching between MatSelect and MatMultiSelect becomes a one-line change. This is intentionally not yet done to simplify development of MatMultiSelect without breaking anything in MatSelect (https://github.com/stefanloerwald/MatBlazor/issues/6).
• Similarly, <MatMultiSelect> could be <MatSelect Multiple="true"> (https://github.com/stefanloerwald/MatBlazor/issues/7).

Please advise whether this could already be merged at this point into a dev-branch, such that we can collaborate.

[PizzaConsole]

Whats the latest on adding this component?

[stefanloerwald]

I'm sorry to say that I personally abandoned implementing this component, as I faced too many non-trivial issues and have non-UI priorities in my daily work at the moment.

[Ogglas]

This would be a much appreciated addition

[tdawson-centauri]

I read the related threads to this issue and didn't have much luck with the posted attempts so started something from scratch. My implementation is strings only, but I'll likely modify it to accept object collections for more utility. It matches pretty closely the look and feel I'm used to with the Angular version. I haven't done extensive testing, but it seems to function well and figured people looking for a solution might appreciate it.

Notes

• I'm using the MatTooltip to display the full selection string and it displays a little black box when empty and mousing over.
• It doesn't currently do anything with a SelectedItems list already containing items which likely requires some sort of selection item to track.

I'll post an updated version if I continue to build this out, but it's a good starting point for anyone struggling with this.

multi-select.txt

[tdawson-centauri]

Here's an updated generic version that works with either string or class collections. In the case of classes the DisplayProperty Parameter is required. It also correctly selects items when binding a SelectedItems collection with existing items.

Usage looks like: <MultiSelect @bind-SelectedItems="@MySelectedItems" SourceItems="@MyItemsSource" Label="My List Label" DisplayProperty="SomePropertyName"></MultiSelect>

One annoyance is the lack of control over how MatMenu opens. I'd prefer it open below but is generally on top somewhere. If anyone has a solution to that let me know.

multi-select.txt