No color change of text in chipItems in .NET MAUI SFChipgroup

[Christian Kurz]

Hello,

I found a bug in .NET MAUI SfChipGroup.

When you set the color for the chipItems and change it for seleceted chipItems, the change will not made in Android:

- In Light Mode: text color of chipItems is never switching to the text color when the chip is selected.

- In Dark Mode: the text color of selected items is always shown an not change to the normal text color.

Plattform: .NET MAUI 8

Syncfusion.Maui.Core Version 27.1.58

Here is the code of the chipGroupItem:

 <chip:SfChipGroup x:Name="MainChipGroup"

                   ItemsSource="{Binding ChipItems}"

                   ChipType="Choice"

                   ChoiceMode="SingleOrNone"

                   ChipBackground="white"

                   ChipTextColor="Black"

                   ChipPadding="8,8,8,8"

                   SelectedChipBackground="Blue"

                   SelectedChipTextColor="White"

                   HorizontalOptions="CenterAndExpand"

                   VerticalOptions="CenterAndExpand">

     <chip:SfChipGroup.ChipLayout>

         <FlexLayout FlowDirection="LeftToRight" Direction="Row" Wrap="Wrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

     </chip:SfChipGroup.ChipLayout>

     <chip:SfChipGroup.ItemTemplate>

         <DataTemplate>

             <VerticalStackLayout HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Margin="18">

                 <Label Text="{Binding .}"

                        MaxLines="1"

                        LineBreakMode="NoWrap"

                        MinimumWidthRequest="90"

                        HorizontalOptions="StartAndExpand"

                        VerticalOptions="StartAndExpand"

                        HorizontalTextAlignment="Center"

                        VerticalTextAlignment="Center" />

             </VerticalStackLayout>

         </DataTemplate>

     </chip:SfChipGroup.ItemTemplate>

 </chip:SfChipGroup>

The sample project is attached to this message.

Best regards

Christian Kurz

Attachment: SfChipGroupSelectedTextColorBug_eae05b3b.zip

[Aarthi Arjunan]

Hi Christian Kurz,

Query 1: In Light Mode: text color of chipItems is never switching to the text color when the chip is selected.

Thank you for reaching out to us. We have investigated your query.

In the SfChipGroup, the SelectedChipTextColor is not supported when using an ItemTemplate. To achieve this, we recommend customizing the text color of the selected chip by implementing the required functionality within the SelectionChanged event. This approach allows you to dynamically update the selected chip's appearance based on your specific styling needs. We have prepared a sample to demonstrate how to set the text color for the selected chip in SfChipGroup. Please refer to the attached sample and the code snippets below for more details.

private void chipgroup_SelectionChanged(object sender, Syncfusion.Maui.Core.Chips.SelectionChangedEventArgs e)

{

    var addedChip = e.AddedItem;

    var removedChip = e.RemovedItem;

    if (viewModel != null)

    {

        if(addedChip != null)

        {

            foreach (var item in viewModel.DataList)

            {

                if (addedChip.Equals(item))

                {

                    item.SelectedColor = Colors.White;

                }

            }

        }

        if(removedChip != null)

        {

            foreach (var item in viewModel.DataList)

            {

                if (removedChip.Equals(item))

                {

                    item.SelectedColor = Colors.Black;

                }

            }

        }

    }           

}

For more information, please refer to this knowledge base article: KB -16171

Please let us know whether the provided suggestion helps to resolve your query. Please don’t hesitate to contact us if you have any concerns or queries.

Query 2: In Dark Mode: the text color of selected items is always shown an not change to the normal text color.

Thank you for reaching out to us. We have reviewed your query but were unable to replicate the reported issue where the ChipGroup item text is visible in Dark mode.

To better assist you, could you please provide us with the device details this would be extremely helpful. This will enable us to thoroughly investigate and propose a more accurate solution.

Regards,

Aarthi A.

Attachment: Reference_cc26a965.zip

[Christian Kurz]

Hello Aarthi,

thank you for your reply.

A video of my example working on our Pixel 6a phone with Android 15 is attached to this message.

Additionally thank you for your code, but I think when I shall make it in C# in the selectedChanged event there will be no need to have this property for binding in the XAML. So why is it there?

Of course you made an extra model class for the items, for me its enough to make only strings as items and the items of the chipGroup can be everything because it shall be from type object?.

The chip group shall be completely set up before use, no change of the properties shall be made when I touch a chip. The elements shall be work even if it not used in a sort of standard way. There shall be no implementation specification mandatory.

The link you provided knowledge base article cannot open by me, because I need an additonal login there, there it opens with a microsoft login.

Best regards

Christian Kurz

Attachment: screen20241118100116_84b9fddc.zip

[Aarthi Arjunan]

Hi Christian Kurz,

 

Query 1: Of course you made an extra model class for the items, for me its enough to make only strings as items and the items of the chipGroup can be everything because it shall be from type object?.

 

Thank you for your response. We have reviewed your query and would like to inform you that using SfChipGroup with ItemTemplate and setting the ItemsSource as a string type is not the most efficient approach. To address this, we have implemented a model and ViewModel class in our sample.

 

Additionally, the SelectedChipTextColor property is not supported when using ItemTemplate in SfChipGroup. As a solution, we dynamically update the label's TextColor inside the chipgroup_SelectionChanged method in the ViewModel class by utilizing the EventToCommandBehavior.

 

Please refer to the attached sample for further details. Let us know if you need any additional assistance.

 

Query 2: In Dark Mode: the text color of selected items is always shown an not change to the normal text color.

 

Regarding your query, we would like to inform you that the reported issue occurs because the SfChipGroup in your sample is configured with an ItemTemplate. In the attached sample, we have set a binding property to manage the SfChipGroup item text color, which resolves the reported issue. Please refer to the attached sample for further details.

 

Please don’t hesitate to contact us if you have any queries.

Query 3: The link you provided knowledge base article cannot open by me, because I need an additonal login there, there it opens with a microsoft login.

 

Apologies for the inconvenience. Please ignore the previous KB link and refer to the updated KB link provided below.

 

KB Link: how-to-apply-selection-indicator-in-net-maui-chip-group
 

Regards,

Aarthi A.

Attachment: ChipGroupSample_3b92635d.zip

[Christian Kurz]

Hi Aarthi,

it's not so nice that I need to make a special chip object for handling the TextColor, the Backgroundcolor is working without doing that, so for me it is a little bit confusing.

By the way of implementig it to our program I found another issue:

The SelectionChanging event is not triggered when I set the SelectedItem of the chipGroup in C#. It doesn't work for selecting an element and even not for deselecting an element by setting the SelectedItem property to NULL. No reaction. For me this is a SelectionChange of the ChipGroup.

We need this selection of elements by code for show actual stored chips and for clearing the list completely do do something other.

I have modified your sample for demonstrating it. This modified sample is attached.

Best regards

Christian Kurz

Attachment: ChipGroupSample_modified_536d1128.zip

[Aarthi Arjunan]

Hi Christian Kurz,

 

Query 1: it's not so nice that I need to make a special chip object for handling the TextColor, the Backgroundcolor is working without doing that, so for me it is a little bit confusing.

 

We have reviewed your query and would like to inform you that we set the BackgroundColor directly on the SfChip, which allows us to access the SelectedChipBackground property without issues. However, we can use any views inside the item template, so we can't specifically set the colour to the text. We request to use the provided solution in the sample level. 

 

Query 2: By the way of implementing it to our program I found another issue that SelectionChanging event didn't trigger

 

We have reviewed your query and are currently analyzing the behavior of the SelectionChanging event when the SelectedItem is manually modified in the code-behind. We will provide you with the details on or before December 02, 2024. We appreciate your understanding and patience in the meantime.

 

Regards,

Aarthi A.

[Aarthi Arjunan]

Hi Christian Kurz,

 

Query 2: By the way of implementing it to our program I found another issue that SelectionChanging event didn't trigger

 

Thank you for your patience. We would like to inform you that in the SfChipGroup, the SelectionChanging event is designed to handle cases where the user directly changes the selection (e.g., by clicking on a chip). When you programmatically change the SelectedItem in code (e.g., sfChipGroup.SelectedItem = null;), the SelectionChanging event is not triggered because this is not a user-driven action.

 

Please don’t hesitate to contact us if you have any concerns or queries.

 

Regards,

Aarthi A.