RadzenTabs, bug with invisible RadzenTabsItem selection with TabRenderMode.Client

Radzen.Blazor Components
1

Hi, i have this code:

<RadzenButton Click="ChangeTabVisible" Text="Change tab visible"/>

<RadzenTabs RenderMode="TabRenderMode.Client" Style="height: 100%;">
    <Tabs>
        <RadzenTabsItem Text="1">Tab1</RadzenTabsItem>
        <RadzenTabsItem Text="2" Visible=@isVisible>Tab2</RadzenTabsItem>
        <RadzenTabsItem Text="3">Tab3</RadzenTabsItem>
        <RadzenTabsItem Text="4">Tab4</RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code{
    private bool isVisible = true;

    private void ChangeTabVisible()
    {
        isVisible = !isVisible;
    }
}

and if i change isVisible to false i get incorrect display of the selected tab
image
is it possible to fix it somehow?

2

Hi @Vitaliy_Tkachenko,

I've just tested this code in our demos and it worked as expected:

image
image1920×1080 184 KB

image
image1920×1080 236 KB

Check if your are using latest Radzen.Blazor.

3

I'm using the latest version, to be honest, I don't know what's wrong

image
image1227×520 17.8 KB

maybe I connected something wrong

@using Microsoft.AspNetCore.Components.Web
@namespace BlazorTestApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="BlazorTestApp.styles.css" rel="stylesheet" />

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard.css">

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>

    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>

image
image1588×485 94.2 KB

4

Can you replicate the problem when you run our tabs example with your code locally?

5

yes, i have it too

photo_2022-06-01_21-43-37
photo_2022-06-01_21-43-371280×616 65.3 KB

photo_2022-06-01_21-43-49
photo_2022-06-01_21-43-491280×624 42.8 KB

a bug occurs when I get on the first tab and then change the visibility of the second by pressing the button, after which I get on the tab that is located to the right of the closed tab (the tab that I clicked on opens, but displays the next tab like selected)

6

Here is what I see:
tabs

UPDATE: I was able to reproduce it if the some of the other tabs is selected, not the first.

7

hello, this bug is still not fixed, when can we expect a fix for this bug?

photo_2022-09-30_14-42-49

8

as i understand the problem is in this javascript code

image