I’m working on a blazor webassembly application, using mudblazor’s expansion panels. In a nutshell, I’m currently unable to correctly trigger them to expand, when they’re bound to an object’s property, which is changed from an internal component. I’ve oversimplified it below (or check out the trymudblazor (https://try.mudblazor.com/snippet/wuwyafQXojksUHSf) ).
I’m using the following model (ExpandModel):
public class ExpandModel
{
private bool _expanded;
public bool Expanded
{
get => _expanded;
set
{
var isChanged = _expanded != value;
_expanded = value;
if (isChanged)
ExpandedChanged.InvokeAsync();
}
}
public EventCallback<bool> ExpandedChanged;
}
This is the component (ExpandComponent):
<MudButton OnClick="ToggleInner">Toggle inner</MudButton>
@code {
[Parameter]
public ExpandModel Model { get; set; }
private void ToggleInner()
{
Model.Expanded = !Model.Expanded;
}
}
And this is the home page:
@page "/"
<PageTitle>Home</PageTitle>
<MudButton @onclick="ToggleOuter">Toggle Outer</MudButton>
<MudExpansionPanels>
<MudExpansionPanel @bind-IsExpanded="Model.Expanded">
<TitleContent>
<ExpandComponent Model="@Model"></ExpandComponent>
</TitleContent>
</MudExpansionPanel>
</MudExpansionPanels>
@code{
private ExpandModel Model = new ExpandModel();
private void ToggleOuter()
{
Model.Expanded = !Model.Expanded;
}
}
When I use “ToggleIOuter” it works exactly how I expect it to. “ToggleInner” changes the objects value, but it’s not changing the UI, eventhough ExpandedChanged is invoked. I am able to make it work, if I somehow call StateHasChanged()
in the homepage. But this doesn’t seem to be the intended way. I’m fairly new to blazor, so I’m sure I’m missing something basic. Any suggestion would be greatly appreciated and my sincerest apologies if this is stupidly obvious, but it’s driving me insane. Thanks in advance!