MatChip / MatChipSet: implemented exclusive and non-exclusive selection

[henon]

According to Material Design Components: there are Choice and Filter chips.

Choice: exclusive selection (visualized by color change)
Filter: non-exclusive selection (visualized by check-marks)
Choice+Filter: exclusive selection with the ability to unselect currently selected value.

I implemented this behavior in MatChipSet which are turned on by setting the Parameter flags Choice=true or Filter=true.

MatChipSet exposes SelectedChip and SelectedChips which can be bound two-way.

Also, Chips can be configured to be removable by click on the TrailingIcon or not if IsRemovable=false. MatChipSet exposes an event that is raised for every removed chip.

This feature was requested by issue 181

This is my first full-fledged MatBlazor component and I'll apreciate any comments or tips for improvement.

I am thinking about implementing a nice little demo that shows off the new features (adding and removing chips, binding selection, etc) for our docs.

[henon]

this is how the demo looks:

[SamProf]

Thank you for this contribution. That's great

[markiemarkus]

I've seen the demo and it working in the documentation site, but am struggling to replicate the Choice Chipset functionality

<MatChipSet Choice="true" @bind-SelectedChip="selectedChip">
        <MatChip LeadingIcon="true" Label="Male"></MatChip>
        <MatChip Label="Female"></MatChip>
        <MatChip Label="Rather not say"></MatChip="true">
        <p class="mt-2">Your choice: @selectedChip?.Label</p>
    </MatChipSet>

[henon]

@markiemarkus have you looked at the complete source code of the chip demo? I guess you are missing a variable declaration or so.

[markiemarkus]

@markiemarkus have you looked at the complete source code of the chip demo? I guess you are missing a variable declaration or so.

I had thought so,
Essentially, nothing happens on clicking my choice

I have the code segment as

<MatChipSet Choice="true" @bind-SelectedChip="selectedChip">
        <MatChip Label="Male"></MatChip>
        <MatChip Label="Female"></MatChip>
        <MatChip Label="Rather not say"></MatChip="true">
        <p class="mt-2">Your choice: @selectedChip?.Label</p>
    </MatChipSet>

  @code
        {
            MatChip selectedChip = null;
        }

[henon]

I just verified that it works. Follow these steps:

1. create a new blazor project (I used Blazor Server)
2. add BatBlazor 2.6.1-develop-013 (check prerelease to see it on nuget)
3. add the using and the js/css like documented on matblazor.com
4. add your snippet above to the Index.razor
   done

[GitSheva]

@markiemarkus have you looked at the complete source code of the chip demo? I guess you are missing a variable declaration or so.

I had thought so,
Essentially, nothing happens on clicking my choice

I have the code segment as

<MatChipSet Choice="true" @bind-SelectedChip="selectedChip">
        <MatChip Label="Male"></MatChip>
        <MatChip Label="Female"></MatChip>
        <MatChip Label="Rather not say"></MatChip="true">
        <p class="mt-2">Your choice: @selectedChip?.Label</p>
    </MatChipSet>

  @code
        {
            MatChip selectedChip = null;
        }

Hey, were you able to solve your problem? I have exactly the same issue.

[henon]

@GitSheva are you using the preview build BatBlazor 2.6.1-develop-013 ?

[markiemarkus]

@henon @GitSheva Hi I had to install the pre-release package mentioned and this solved my issue.

[GitSheva]

@henon @markiemarkus the issue was resolved updating the package with 2.6.1. Thanks for your help.

[GitSheva]

@henon @markiemarkus another question, do you know how to make the first MatChip selected by default (only with the first load)? I used IsSelected property, it's loading control with fist chip selected but I can't change it anymore. Do you have any example? Thanks

[henon]

I know that problem but I'm not sure it can be solved without changing something in the MatChip/MatChipSet code. Have you tried assigning the reference of the first chip to the variable selectedChip?

[GitSheva]

@henon it worked, thank you so much...

[GitSheva]

@henon maybe you know as well how to pre-select one of the choice chips by the value from code?
I have a chipset with two languages, need to pre-select one by value from local storage
Do I have to foreach all chips in chipset, compare the value and if value matches call chip.IsSelected?
Or the is any other way?
Thanks

[henon]

I don't know off the top of my head. Either that or set SelectedChips on ChipSet via two-way binding to the Chips you want to be selected.

[peterthomastlc]

@henon, not sure if I'm begging for help in the right place here, but I'm using the Filter setting to select a combination of on/off MatChips. I need to preselect multiple chips on page initialisation, and track changes to enabled chips so that I can update the database on changes.
I can't seem to make it work. If I use chip.IsSelected in the markup, it'll preselect but prevent any further changes.
If I bind to SelectedChips, it'll track changes, but doesn't want to use it to preset chips on page load.
Any ideas would be very welcome, before I throw in the towel & fall back on a select list :-(

[henon]

I think this is a bug that needs to be fixed in MatChipSet implementation.

[lindespang]

There is a bug indeed regarding preselection, I added some chips to my app and found out what the issue is. Currently I have implemented a workaround in my app but will submit a correction PR when I have time for it.

[lindespang]

Or I could give someone pointers if they want to fix it. (Not at the computer atm thats why I talk in riddles)

[peterthomastlc]

Thanks, line 75 of BaseMatChipSet.cs looks dodgy to me - I don't see how you can ever preselect anything using set_SelectedChips?

                var selected = new HashSet<MatChip>(value);
                foreach (var chip in _chips)
                    chip.IsSelected = selected.Contains(chip);

No worries, I'll hang on for your fix, thanks.

[peterthomastlc]

Yup, replacing MatChipSet.cs,line 75 with matching on the Label value instead of a MatChip hash allows preselecting to work in OnAfterRender:-

var selected = new HashSet(value.Select(x => x.Label));
foreach (var chip in _chips)
chip.IsSelected = selected.Contains(chip.Label);

Issue #671 raised.

[SpaceOgre]

I have a problem with MatChipSet/MatChip and IsSelected. If I put any value there then when I click a chip selection does not change. This seems like it should work? Or I'm using it wrong?

I guess I could do what @peterthomastlc have suggested but I would like to use the IsSelected property, otherwise what is it for?

@lindespang did you have some kind of solution/hint to give for this problem?

Edit

Now I understand why the <MatChip IsSelected=""> is not working as I want, because of the rendering. Guess I need to learn more about blazor.

Will try my hand on a solution tomorrow and create a PR