Hello
We are using a RadzenNumeric input to allow users to dynamically increase the amount of tabs in a complex form we have. We are now facing an issue when switching tabs, sometimes it gets stuck on a particular tab. It appears as if multiple tabs are active, but only the content of the stuck tab is displayed. Once an input is altered inside the tab, the state somehow catches up and the issue gets resolved, rendering the latest selected tab.
We can't tell what's the reason for this issue by just looking at a screenshot. Try to debug your case by attaching Radzen.Blazor source code.
I understand! Since our actual form contains a lot of business code, I extracted the relevant bits in this minimal code example. This won't compile as there's an import missing, but you should get a basic idea of our issue.
UPDATE: Snippet now compiles
@page "/radzentabs"
<div class="container">
<div class="col">
<div class="col-12 mt-2">
Object count:
</div>
<div class="col">
<RadzenNumeric style="width: 100%;" Value="@Count" Name="ObjectCount" TValue="int" Min="1"
Change="EditObjectAmount"/>
</div>
</div>
<RadzenTabs SelectedIndexChanged="i => { TabIndexChanged(i); }" TabPosition="@TabPosition.Top" RenderMode="TabRenderMode.Client">
<Tabs>
@for (var objectIndex = 0; objectIndex < Count; objectIndex++)
{
var tabTitle = "Tab " + (objectIndex + 1);
<RadzenTabsItem Name=@tabTitle Text="@tabTitle">
<span>@tabTitle content</span>
</RadzenTabsItem>
}
</Tabs>
</RadzenTabs>
</div>
@code
{
int Count = 1;
[Parameter]
public EventCallback OnAmountChange { get; set; }
private async Task EditObjectAmount(int newValue)
{
newValue = newValue < 1 ? 1 : newValue;
Count = newValue;
await OnAmountChange.InvokeAsync();
StateHasChanged();
}
private void TabIndexChanged(int index)
{
Console.WriteLine($"Tab index changed to {index}");
}
}
We would need a runnable snippet. Try to make your example compile so we can test it.
Got it. I have edited the code in my post so it compiles. Let me know if you need anything else.
Hi @rachid,
I was not able to reproduce the issue you are reporting. The only issue I've found is with selected tab greater than the current number of tabs however this can be fixed by setting SelectedIndex to 0 every time when changing the number of tabs.
