[Bug]: SelectedTabChanged method invoked twice resulting in wrong tab selected

[1alikhan]

Blazorise Version

1.3.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

<Row>
<Column ColumnSize="ColumnSize.IsAuto.OnDesktop">
  <Tabs @ref="@tabs" SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged">
      <Items>
          <Tab Name="FirstTab">First tab</Tab>
          <Tab Name="SecondTab">Second Tab</Tab>
          <Tab Name="ThirdTab">Third tab</Tab>
      </Items>
  </Tabs>
</Column>
</Row>
  <TabsContent @ref="@tabsContent" SelectedPanel="@selectedPanel" SelectedPanelChanged="@OnSelectedPanelChanged">
                  <TabPanel Name=FirstTab"></TabPanel>
<TabPanel Name=FirstTab"></TabPanel>
<TabPanel Name=FirstTab"></TabPanel>
.
.
.

@code
{
    public string selectedTab { get; set; }
    Tabs tabs = default!;
    TabsContent tabsContent = default!;
    void OnSelectedTabChanged(string name)
    {
        selectedTab = name;
        tabsContent.SelectPanel(name);
    }
    void OnSelectedPanelChanged(string name)
    {
        selectedPanel = name;
    }
}

Steps to reproduce

In my blazor server project, i am using blazorise UI library. Using the tab component works just fine in almost all the cases. However controlling the tabs programmatically, in a couple instances the SelectedTabChanged method is invoked twice. First with the actual tab invoked via code secondly on its own with default tab. e-g invoking OnSelectedTabChanged with SecondTab results in selection of FirstTab after second invocation.

What is expected?

SelectedTabChanged to be invoked once

What is actually happening?

SelectedTabChanged gets invoked twice

What browsers do you see the problem on?

No response

Any additional comments?

A similar issue is already reported but says its resolved.

[stsrki]

I believe your problem is that you're manually calling tabsContent.SelectPanel(name); which will result in invoking OnSelectedPanelChanged. Once when Blazor renders the component, once with your code. You don't need to invoke it manually. Just bind the tabs and panels to the same name.

<Row>
<Column ColumnSize="ColumnSize.IsAuto.OnDesktop">
  <Tabs @ref="@tabs" @bind-SelectedTab="@selectedTab">
      <Items>
          <Tab Name="FirstTab">First tab</Tab>
          <Tab Name="SecondTab">Second Tab</Tab>
          <Tab Name="ThirdTab">Third tab</Tab>
      </Items>
  </Tabs>
</Column>
</Row>
  <TabsContent @bind-SelectedPanel="@selectedTab>
          <TabPanel Name=FirstTab"></TabPanel>
          <TabPanel Name=FirstTab"></TabPanel>
          <TabPanel Name=FirstTab"></TabPanel>
.
.
.

@code
{
    public string selectedTab { get; set; }
    Tabs tabs = default!;
    TabsContent tabsContent = default!;
}

[1alikhan]

Yes thats the problem. Thanks