Chips not updating at second time page navigation

[SZL]

Hello,

I have this code in Blazor Server NET9 (simplified code, I removed irrelevant parts):

@page "/profile"

@page "/profile/{RequestUserId}"


@code {
    [Parameter] public string? RequestUserId { get; set; }


    public List<string> userRoles { get; set; } = new();
}


<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-4 text-center">
            <div class="text-center mt-1">
                #<!-- #region List roles with syncfusion -->


                <SfChip style="display:block">
                    <ChipItems>
                        @foreach (var r in userRoles)
                        {
                            string cls = (r == "Global Administrator" ? "e-danger" : (r.Contains("Admin", StringComparison.OrdinalIgnoreCase) ? "e-warning" : "e-default"));
                            <ChipItem @key="r" Text="@r" CssClass="@cls"></ChipItem>
                        }
                    </ChipItems>
                </SfChip>


                <!-- #endregion -->


                #<!-- #region List roles without syncfusion -->


                @foreach (var r in userRoles)
                {
                    string cls = (r == "Global Administrator" ? "e-danger" : (r.Contains("Admin", StringComparison.OrdinalIgnoreCase) ? "e-warning" : "e-default"));
                    <p class="@cls">@r</p>
                }
                <!-- #endregion -->
            </div>
        </div>
    </div>
</div>

My test case is:

- 1. Navigate to page without parameter

- 2. Navigate to page with parameter

- 3. Navigate to page without parameter

I created 2 blocks:

- First with synfucion chips control

- Second with normal <p> tags.

At third step the chips not updating, while the normal <p> tag shows the items well. I checked the datasource multiple times, it contains the good items every cases, so there are no problem with the datasource.

 await InvokeAsync(StateHasChanged); -> Not helps!

I attach an image with the steps that shows the problem visually.

Can you help me please why this happen and how can I refrest the chips in step 3.?

Thank you!

Attachment: sync_13e45af1.zip

[Prasanth Madhaiyan]

Hi SZL,

Greetings from Syncfusion support.

Based on the shared details, we understand that you are facing an issue when dynamically changing the Blazor Chip component text. However, for dynamically rendering items in the Chip component, you can use the Chips property, which is a direct property of the Chip component, instead of rendering chip items using the ChipItems tag. This property helps render chip items without any issues.

For your reference, we have attached the sample by utilizing the Chips property.

Sample: https://blazorplayground.syncfusion.com/LNhyjgViSIgxLKNE

Try out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[SZL]

Thank you very much, it works fine now.

Have a nice day!

[Shereen Shajahan]

Hi 

Glad to know your issue has been resolved. Please get back to us for assistance in the future.

Regards,

Shereen

[Johan Bennink]

I'm having problems refreshing Chips as well. But in my case I have a @ref="Agentchips" and in code I do

foreach (var item in agents)

{
    control.AddChip(new ChipItem { Text = $"{item.Label} ({item.Count})", Value = $"{item.Id}", CssClass = cssClass });

}

In my case VS is alerting that "BL0005: Component parameter 'Text' should not be set outside of its component` for all three properties I set here! Is this a problem?

Then later on whil refreshing another dataset I also update the Chips to refrlect their presence in that dataset by changing the color like so:

foreach (var chip in AgentsChips.Chips)

{
    chip.CssClass = (results.FirstOrDefault(c => c.AgentId.ToString() == chip.Value) == null) ? "e-warning" : "e-success";
}

When executing this the chips do'n update on screen. I am using InteractiveServer rendering.
Only when I press one of the chips they all refresh and show the correct colors.

How Can I force a refresh of the Chips after chaning the colors, I tried StateHasChanged on the page but that does not work, and there is no option to call StateHasChanged() on the sfChips component?

[Johan Bennink]

So I fixed the page refresh issue by using the SelectedChips and Chip to refer to properties in the page instead of access them directly from an @ref on the SfChip control. Looks like Bl;azor only detects changes and repaints the control when you change it that way, and *not* when directly accessing the properties.

[Mallesh Ravi Chandran]

Thank you for providing the update. If you have any additional concerns or inquiries, do not hesitate to reach out to us.