MatTab in a different file makes it not update.

[lilon55]

In a normal MatTab in the same file as the MatTabGroup, when something from the child content of the tab changes or StateHasChanged() is called it forces the component to re-render. But if the MatTab is moved to a different file, even calling StateHasChanged() will not update it.

See the following example: Index.razor:

@page "/"

<MatButton OnClick="@StateHasChanged">State Has Changed</MatButton>
<MatTabGroup>
    <MatTab Label="First">
        <MatButton OnClick="@Clicking">Press Me!</MatButton>
        @if(Clicked)
        {
            <h1>You Pressed it!</h1>
        }
    </MatTab>
    <NewTab/>
</MatTabGroup>

@code
{
    public bool Clicked {get; set;}

    public void Clicking()
    {
        Clicked = !Clicked;

        StateHasChanged();
    }
}

NewTab.razor:

<MatTab Label="Second">
    <MatButton OnClick="@Clicking">Press Me!</MatButton>
    @if(Clicked)
    {
        <h1>You Pressed it!</h1>
    }
</MatTab>

@code
{
    public bool Clicked {get; set;}

    public void Clicking()
    {
        Clicked = !Clicked;

        StateHasChanged();
    }
}

The two tabs perform the exact same thing but the first one re-renders immediately and the second one does not. The StateHasChanged button calls it on the parent page which causes it to re-render the whole page and it shows that the bool was in fact changing.

Is this correct behavior, are tabs not allowed to be in separate files, and I am misusing the? Or is this a bug? Is there a workaround for this? Any help would be appreciated.

Link for the BlazorFiddle with this example: https://blazorfiddle.com/s/5zsq4cs4

[lindespang]

Hi! Thanks for providing BlazorFiddle example!👏 I'll take a look at this, in the meantime a workaround is create a component of the tab content only and not the <MatTab>

I've edited your fiddle as an workaround example: https://blazorfiddle.com/s/1074z5gq

[surenkasilsyfinity]

Hi, Please can you advise if the above has been resolved as I am having the same issue stated above. I tried your workaround example but it still seems not to be re-rendering the page in the example itself. Let me know. Thanks.