search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
8.2k stars 1.3k forks source link

MudChipSet selectedvalue not correct #10331

Open charlesninane94 opened 4 days ago

charlesninane94 commented 4 days ago

Things to check

Bug type

Component

Component name

MudChipSet

What happened?

https://try.mudblazor.com/snippet/wEmIPbwUzDgsjgXT

Why is this code not working?

Expected behavior

When I click on the button I expect the test4 chip to be selected.

Reproduction link

https://try.mudblazor.com/snippet/wEmIPbwUzDgsjgXT

Reproduction steps

  1. Click on the button
  2. Observe test 4 mudchip is not selected

Relevant log output

No response

Version (bug)

7

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

Code of Conduct

ScarletKuro commented 4 days ago

https://try.mudblazor.com/snippet/GucyFvGAgLDIOyAu fixed version

charlesninane94 commented 4 days ago

Thank you very much, @ScarletKuro. Could you briefly explain what is happening there and when to use await Task.Yield() with MudBlazor?

Thank you in advance for your help.

ScarletKuro commented 4 days ago

It's complicated to explain. We use Blazor lifecycle methods to register MudChips inside the MudChipSet, because Blazor doesn't have a specialized API to track the list of components inside the MudChipSet. Since you're dynamically changing the list of MudChips, I think what's happening is that OnInitialized is not fired until your button action has executed. Even if you call StateHasChanged before setting selectedValue, this doesn't guarantee it. That's why, when you set the selection to test4, the internal list of chips: https://github.com/MudBlazor/MudBlazor/blob/43fbb956b46650885a4b25230fece4a1c81ed253/src/MudBlazor/Components/ChipSet/MudChipSet.razor.cs#L45 May not have been updated yet. Visually, it's not shown because the binding occurred before the internal chip list had been updated. However, Task.Yield queues the continuation on the current synchronization context (the Blazor UI thread), which gives control back to the UI thread to finish any pending tasks. Only after that will your code continue and set selectedValue = "test4".