SfTabView SelectedIndex does not scroll to the selected TabItem in UI

[Günter Rudigier]

Hi there

I use TabView to show different items in a view and the user can manually add items to the bounded list. When I add a new item, i also set the SelectedItem from the TabView and the new TabItem gets selected. 

This works fine as long as the TabView items header is not full, but if the headers needs scrolling, it is not scrolled into view and that is a little strange for me. Is there a possibility to bring the selected TabItem into view?

Hope you understand my problem :-)

Thx for help and regards!

Günter

Before add, the selected Item is marked

After add, the selected is not shown:

[Kishore Jeyachandran]

Hi Günter,

 

Thank you for contacting Syncfusion support.

 

We tried to replicate the issue you described by creating a simple sample where SfTabItems are manually added on a button click, and the newly added tab is set as the selected tab. In our testing, the selection works as expected, and when the tab headers exceed the screen width, the header scrolls automatically to bring the selected tab into view. We have attached both the sample project and a demo video showcasing the behavior observed during our testing.

 

To help us investigate further, Could you please provide us:

• The specific platform where you are experiencing the issue.
• The Syncfusion NuGet version you are currently using.
• Kindly modify the attached sample to reproduce the issue you're facing.

 

This information will help us assist you more effectively and provide a timely resolution.

 

Regards,
Kishore J

Attachment: TabViewSample_e1844f0e.zip

[Günter Rudigier]

Thanks for the example and yes there is every thing fine, but I use it a little different and there is a problem.

I attached a modified example and there you are able to see the error.

Regards

Günter

Attachment: TabViewSample2_29700369.zip

[Kishore Jeyachandran]

Hi Günter,

 

We have been able to replicate the issue where the selected TabItem is not automatically scrolled into view when the tab headers exceed the visible width. Currently, we are investigating this issue at the source level, and we will provide further updates by April 25, 2025.

 

We truly appreciate your patience and understanding as we work toward a resolution. Please feel free to reach out if you have any additional questions or concerns in the meantime.

 

Regards,

Kishore J

[Kishore Jeyachandran]

Hi Günter,

Thank you for your patience while we investigated the issue further.

As part of our analysis, we found that the behavior where the selected TabItem does not scroll into view after programmatically selecting it is related to the timing of the UI updates within the SfTabView. Specifically, when a new tab is added and selected immediately, the UI may not have completed updating the tab headers, which prevents the selected tab from being properly brought into view.

We have provided a solution, where adding a slight delay after inserting the new item and before setting the SelectedTab helps ensure that the layout has enough time to complete. Here is the updated method with this adjustment:

Code snippet :

private async void OnAddTabClicked(object sender, EventArgs e)

{

    var idx = Items.Count;

    Items.Add(new TestItem($"Item {idx + 1}"));

    await Task.Delay(10);

    SelectedTab = idx;

}

Applying this change ensures that the SfTabView behaves as expected, even when the tab headers extend beyond the visible area.

Please feel free to reach out if you have any further questions.

Regards,

Kishore J