CODEWITHSUNDEEP
blazor-server-sidemudblazor
Guillaume D
Guillaume D

Reputation: 185

Issue updating MudBlazor component in OnAfterRenderAsync

I'm trying to recover some data asynchronously from localStorage then activate a specific tab from MudTabs component if data is found.

<MudTabs @ref="tabs">
  <MudTabPanel>
  </MudTabPanel>
  <MudTabPanel>
  </MudTabPanel>
</MudTabs>

The problems come from my method OnAfterRenderAsync who doesn't work updating the MudBlazor component state, here is the code:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    var result = await protectedSessionStore.GetAsync<int>("Call");
    if (result.Success)
    {
      tabs.ActivatePanel(1);
      StateHasChanged();
    }
  }
  //return base.OnAfterRenderAsync(firstRender);
}

I tested a previous version of it who worked pretty well but i cannot use the await operator inside of it, the method not being asynchronously:

protected override Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    tabs.ActivatePanel(1);
  }
  return base.OnAfterRenderAsync(firstRender);
}

I didn't found what is specifically the difference between returning the base method and calling the StateHasChanged. When using the StateHasChanged method the active panel remain on the 0 index.

If you have any ideas, thanks in advance.

Upvotes: 0

Views: 1449

Answers (1)

Kai-Rune
Kai-Rune

Reputation: 462

I specified the ID on the tab to be numeric, same value as the index of the tab.

(It worked for me as a workaround on .net 7.0.3 and MudBlazor 6.1.9)

<MudTabs @ref="@Tabs">
    <MudTabPanel ID="@(0)">
    </MudTabPanel>
    <MudTabPanel ID="@(1)">
    </MudTabPanel>
</MudTabs>

@code {
  protected override async Task OnInitializedAsync()
  {
    var activeTab = await LocalStorageService.GetItemAsync<int?>("ActiveTab"); 
    if (activeTab != null) {
        Tabs!.ActivatePanel(activeTab.Value);
    }
  }
}

Upvotes: 0

Related Questions