XamarinCommunityToolkit: [Bug] Setting TabView.SelectedIndex does not "visually" switch tabs

Description

If I programmatically set the SelectedIndex of a TabView to say 1 when it is originally on SelectedIndex of 0, it appears that internally the new Tab is selected but visually the the TabView appears to still be on Tab 0. If you were then to physically tap on Tab 1, nothing would happen since it is internally already on Tab 1. Tapping on Tab 0 and then Tab 1 will finally successfully show Tab 1. See gif below:

Steps to Reproduce

XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="App4.MainPage">

	<StackLayout>
		<Button Text="Change Tab"
                              Clicked="Button_Clicked" />
		<xct:TabView x:Name="MyTabView"
					 TabIndicatorPlacement="Bottom"
					 TabIndicatorColor="Orange">
			<xct:TabViewItem Text="First">
				<Label Text="First Tab" />
			</xct:TabViewItem>
			<xct:TabViewItem Text="Second">
				<Label Text="Second Tab" />
			</xct:TabViewItem>
		</xct:TabView>
	</StackLayout>
</ContentPage>

Code Behind:

namespace App4
{
	public partial class MainPage : ContentPage
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void Button_Clicked(object sender, EventArgs e)
		{
			MyTabView.SelectedIndex = 1;
		}
	}
}

Expected Behavior

Upon button click, the TabView should visually navigate to the next Tab on SelectedIndex change.

Actual Behavior

tabview

Basic Information

  • Version with issue: 1.0.0-pre5
  • IDE:
  • Platform Target Frameworks:
    • iOS: 14.2
    • Android: 10.0

Workaround

MethodInfo dynMethod = MyTabView.GetType().GetMethod("UpdateSelectedIndex", BindingFlags.NonPublic | BindingFlags.Instance);
dynMethod?.Invoke(MyTabView, new object[] { 1, false });

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 4
  • Comments: 18 (4 by maintainers)

Commits related to this issue

Most upvoted comments

Hi, thanks for the response!

I am using the latest version. It is not fixed there.

I am using the workaround presented. And i just realized this…

My issue was that i wanted the view to start on another tab index. So i put Selected index = 1; After InitializeComponent(); was called in the constrctor. Doing so, the Tabview_SelectionChanged was actually called twice (only on iOS), and i think that messed up the workaround execution.

My solution is now to set the tab index only on the Android platform, in the constructor. And I handle the first event on iOS explicitly, in the event handler.

@udde As far as I know, this bug is already fixed. Try to update Xamarin.CommunityToolkit nuget package, maybe you are using some old TabView version. Alternatively, you can check TabViewIndexWorkaround (works for old versions with a bug).