SelectedChip binding issues

[Christopher]

In the below component, I am seeing an issue where once a chip is clicked, the component does not update, and SelectedFilters is never updated even though it is bound to the SfChip.SelectedChips object. When removing the ChipEvents line, the UI updates, but I am not able to notify the parent that a selection was made. This component code used to work in an earlier version (19.4.0.56), but does not now. I am currently using version 24.1.43 of Syncfusion

@using Syncfusion.Blazor.Buttons

@if (FilterOptions != null)

{

    <SfChip Selection="@SelectionType.Multiple" @bind-SelectedChips="SelectedFilters">

        <ChipEvents OnClick="@(async (args) => await HandleFilterClicked(args))" />

        <ChipItems>

            @foreach (var chipText in FilterOptions)

            {

                <ChipItem Text="@chipText" />

            }

        </ChipItems>

    </SfChip>

}

@code {

    [Parameter]

    [EditorRequired]

    public String[] FilterOptions { get; set; }

    [Parameter]

    public EventCallback<String[]> SelectedFiltersChanged { get; set; }

    [Parameter]

    public String[] SelectedFilters { get; set; } = { };

    private async Task HandleFilterClicked(ChipEventArgs args)

    {

        if (SelectedFiltersChanged.HasDelegate){

            await SelectedFiltersChanged.InvokeAsync(SelectedFilters);

        }

    }

}

[SureshRajan Alagarsamy]

Hi Christopher,

Greetings from Syncfusion support.

We have reviewed your concern about the "SelectedChips" property not updating within the "OnClick" event in the Chips component. To address this, we would like to inform you that we have introduced a new event named "SelectionChanged." This event triggers after the "OnClick" event, enabling us to update the "SelectedChips" value at our source level. Subsequently, the "SelectionChanged" event triggers, updating the value in the "SelectedFilters" variable—your designated two-way binding variable for the "SelectedChips" property.

We recommend utilizing the "SelectionChanged" event to access the updated "SelectedChips" value.

Refer to the below code snippet for further reference.

[Index.razor]

 

@if (FilterOptions != null)

{

    <SfChip @ref="chipObj" Selection="@SelectionType.Multiple" @bind-SelectedChips="SelectedFilters">

        <ChipEvents SelectionChanged="SelectionChanged" />

        <ChipItems>

            @foreach (var chipText in FilterOptions)

            {

                <ChipItem Text="@chipText" />

            }

        </ChipItems>

    </SfChip>

}

 

 

 

@code {

    ......

 

    public async Task SelectionChanged()

    {

        await SelectedFiltersChanged.InvokeAsync(SelectedFilters);

    }

}

We have also attached a sample for your reference.

Sample : Attached as zip folder.

Regards,
Suresh.

Attachment: BlazorChips_597a10f7.zip