Tab SelectedItem value does not match actual tab index when Visible property is used.

[Kyle White]

I've got an SfTab component set up in my Blazor application that has one main tab, and six additional tabs that utilize the Visible parameter that hides/shows the tabs based on a boolean that is tied to a button/event callback.

I need to know which exact tab that the user has selected when the user presses a button on the page (for PDF exporting). The issue is that SelectedItem only matches the index of what tabs are currently VISIBLE. Not the index of the actual tab in the SfTab object.

For example, if I press the button to make tab #5 visible so that only the main tab and tab #5 are visible, and I select tab #5, the index SelectedItem is set to 1.

Code example:

    <SfTab @ref="Tab" ID="Tab" @bind-SelectedItem="@SelectedItem" EnablePersistence="true">

        <TabEvents Selected="@TabSelected"></TabEvents>

<TabItems>

<TabItem>

<ChildContent><TabHeader Text="Main"/></ChildContent>

...

</TabItem>

<TabItem Visible="@bool1">

<ChildContent><TabHeader Text="Tab 1"/></ChildContent>

...

</TabItem>

<TabItem Visible="@bool2">

<ChildContent><TabHeader Text="Tab 2"/></ChildContent>

...

</TabItem>

<TabItem Visible="@bool3">

<ChildContent><TabHeader Text="Tab 3"/></ChildContent>

...

</TabItem>

</TabItems>

</SfTab>



@code {

SfTab? Tab;

bool bool1 { get; set; } = false;

bool bool2 { get; set; } = false;

bool bool3 { get; set; } = false;

int SelectedItem = 0;

private void TabSelected(SelectEventArgs args) {

Console.WriteLine(Tab.Items[SelectedItem].Header.Text);

}

}

If bool 3 is true while bool1 and bool2 are false, and I click on that tab, the SelectedItem value is set to 1, not to 3 as I would have expected.

[Ruksar Moosa Sait]

Hi Kyle,

We have checked on your query and let you know that you can filter the added tab items based on the Visible property in the Selecting event of the tab to get the Header text of the selected tab like the below code. We have prepared a sample for your reference.

[Index.razor]

<TabEvents Selecting="@Selecting" Selected="@TabSelected"></TabEvents>

List<TabItem> VisibleItems = new List<TabItem>();

 

public void Selecting(SelectingEventArgs args)

{

    var TabItems = TabObj.Items;

    foreach (var item in TabItems)

     {

        if (item.Visible)

        {

            VisibleItems.Add(item);

        }

     }

}

 

public void TabSelected(SelectEventArgs args) {

    Console.WriteLine(VisibleItems[SelectedItem].Header.Text);

}

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: BlazorGetTextofSelectedTab_d36a30dd.zip

[Kyle White]

Unfortunately I was getting inconsistent results with this solution, I tried modifying the Selecting method as such, but it now only ever prints the name of the first tab in the list.

        foreach(var item in TabItems) {
            if (item.Visible) {
                VisibleItems.Add(item);
            } else if (!item.Visible) {
                VisibleItems.Remove(item);
            }
        }


[Kyle White]

I've gotten it ALMOST working with this, but if more than two tabs are opened not in their order as defined, it will become out of order. I've added buttons in your sample for tabs 1 and 2 and modified the ItemClick methods to do bool1 = !bool1; for switching visibility on and off. If I press the buttons for item 1, item 3, then item 2, it will print out "Tab 1, Tab 3, Tab 2" instead of "Tab 1, Tab 2, Tab 3."


        foreach (var item in TabItems)
        {
            if (item.Visible && !VisibleItems.Contains(item))
            {
                VisibleItems.Add(item);
            }
            else if (!item.Visible)
            {
                VisibleItems.Remove(item);
            }
        }

[Kyle White]

This is the modified solution that I'm working with.

Attachment: BlazorGetTextofSelectedTab_d36a30dd_(2)_29111711.zip

[Ruksar Moosa Sait]

Hi Kyle,

We have checked on your shared sample to replicate the reported issue but we are unable to exactly replicate the issue at our end. So could you please get back to us with the a Video reference of the reported issue that would help us to validate and provide the appropriate solution?

Regards,

Ruksar Moosa Sait

[Kyle White]

Sorry about the delay, this project fell to the side a little bit but I'm trying to revisit it now.

Sure, here's a couple of videos demonstrating the issue.  I just discovered another bug I guess with the SfTab component as well. SelectedItem does not revert to 0 if all of the additional tabs are hidden and the main tab is selected by default. This is also visible in the first video.

https://i.gyazo.com/ee8b95913fa6f20f7d9c6b9c5404c937.mp4

https://i.gyazo.com/871e4b6aa21e4e987478adb3e47cbe5d.mp4

[Ruksar Moosa Sait]

Hi Kyle,

We have checked on the shared videos and let you know that in the default Tab Architecture, the Selected Index will not be updated for the tab visible items that are out of range. Hence would require additional details like the use case of your requirement to further provide the appropriate solution.

Regards,

Ruksar Moosa Sait