Xamarin Community Toolkit TabView switching tabs when tapping on entry

Question

I have a strange behavior with the TabView. View:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PLUTester.Test.View.Home"
             xmlns:view="clr-namespace:PLUTester.Test.View"
             xmlns:controls2="clr-namespace:MarcTron.Plugin.Controls;assembly=Plugin.MtAdmob"
             xmlns:local="clr-namespace:PLUTester;assembly=PLUTester"
             xmlns:xtc="http://xamarin.com/schemas/2020/toolkit"
             xmlns:localfonts="clr-namespace:PLUTester.AppFonts"
             BackgroundColor="White">
    <ContentPage.Resources>
        <Style TargetType="xtc:TabViewItem">
            <Setter Property="VerticalOptions" Value="Center"/>
            <Setter Property="FontSize" Value="30" />
            <Setter Property="FontSizeSelected" Value="35"/>
            <Setter Property="FontFamily" Value="MyIcon"/>
            <Setter Property="VerticalOptions" Value="FillAndExpand" />
            <Setter Property="TextColor" Value="Gray" />
            <Setter Property="TextColorSelected" Value="Black" />
            <Setter Property="FontAttributesSelected" Value="Bold" />
            <Setter Property="BadgeTextColor" Value="Black"/>
        </Style>

        <Style x:Key="CustomTabStyle" TargetType="xtc:TabView">
            <!--<Setter Property="IsTabTransitionEnabled" Value="True" />-->
            <Setter Property="TabStripHeight" Value="50" />
            <Setter Property="TabContentBackgroundColor" Value="White" />
            <Setter Property="TabIndicatorPlacement" Value="Bottom"/>
            <Setter Property="TabIndicatorColor" Value="Black"/>
            <Setter Property="TabStripPlacement" Value="Bottom" />
        </Style>
    </ContentPage.Resources>
    <ContentPage.Content>
        <Grid>
            <xtc:TabView Style="{StaticResource CustomTabStyle}" IsSwipeEnabled="False">
                <xtc:TabView.TabStripBackgroundView>
                    <Frame BackgroundColor="White" BorderColor="Gray" CornerRadius="0" Margin="-1,0,-1,0"/>
                </xtc:TabView.TabStripBackgroundView>
                <xtc:TabViewItem Text="{x:Static localfonts:FontIcon.SchoolOutline}">
                    <Grid>
                        <ContentView Content="{Binding TestView}"/>
                    </Grid>
                </xtc:TabViewItem>
                <xtc:TabViewItem Text="{x:Static localfonts:FontIcon.CardsOutline}">
                    <Grid>
                        <ContentView Content="{Binding LernView}"/>
                    </Grid>
                </xtc:TabViewItem>
                <xtc:TabViewItem Text="{x:Static localfonts:FontIcon.ChartLine}">
                    <Grid>
                        <ContentView Content="{Binding StatisticsView}"/>
                    </Grid>
                </xtc:TabViewItem>

                <xtc:TabViewItem Text="{x:Static localfonts:FontIcon.Podium}">
                    <Grid>
                        <ContentView Content="{Binding HighscoreView}"/>
                    </Grid>
                </xtc:TabViewItem>

                <xtc:TabViewItem Text="{x:Static localfonts:FontIcon.Tune}">
                    <Grid>
                        <ContentView>
                            <view:Settings/>
                        </ContentView>
                    </Grid>
                </xtc:TabViewItem>
            </xtc:TabView>           
        </Grid>        
  </ContentPage.Content>
</ContentPage>

Viewmodel:

        private ContentView _TestView;

        public ContentView TestView
        {
            get { return _TestView; }
            set { _TestView = value;
                OnPropertyChanged(nameof(TestView));
            }
        }

        private ContentView _LernView;

        public ContentView LernView
        {
            get { return _LernView; }
            set { _LernView = value;
                OnPropertyChanged(nameof(LernView));
            }
        }

        private ContentView _StatisticsView;

        public ContentView StatisticsView
        {
            get { return _StatisticsView; }
            set { _StatisticsView = value;
                OnPropertyChanged(nameof(StatisticsView));
            }
        }

        private ContentView _HighscoreView;

        public ContentView HighscoreView
        {
            get { return _HighscoreView; }
            set { _HighscoreView = value;
                OnPropertyChanged(nameof(HighscoreView));
            }
        }

The second page (LernView) contains some entries, when I tap on a entry the tabview switches back to the first page and so its not possible to enter some data. The strange thing is, when I change the position of the pages, so that "LernView" is before "TestView" in the TabView, then the entries in "LernView" works as expected, but the entries in "TestView" kicks me back to the first site. Same behavior with picker.

Here is the output from debug window, when tapping a entry:

[ViewRootImpl@b8ac428[MainActivity]] ViewPostIme pointer 0
[ViewRootImpl@b8ac428[MainActivity]] ViewPostIme pointer 1
[InputMethodManager] prepareNavigationBarInfo() DecorView@add6a19[MainActivity]
[InputMethodManager] getNavigationBarColor() -16711423
[InputMethodManager] Starting input: tba=com.modev.plutester ic=com.android.internal.widget.EditableInputConnection@4a24c5d mNaviBarColor -16711423 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
[InputMethodManager] startInputInner - Id : 0
[InputMethodManager] startInputInner - mService.startInputOrWindowGainedFocus
[InputTransport] Input channel constructed: 'ClientS', fd=231
[InputTransport] Input channel destroyed: 'ClientS', fd=226
[InputMethodManager] SSI - flag : 0 Pid : 28689 view : com.modev.plutester
[InputMethodManager] prepareNavigationBarInfo() DecorView@add6a19[MainActivity]
[InputMethodManager] getNavigationBarColor() -16711423
[InputMethodManager] prepareNavigationBarInfo() DecorView@add6a19[MainActivity]
[InputMethodManager] getNavigationBarColor() -16711423
[InputMethodManager] Starting input: tba=com.modev.plutester ic=null mNaviBarColor -16711423 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false
[InputMethodManager] startInputInner - Id : 0
[InputMethodManager] startInputInner - mService.startInputOrWindowGainedFocus
[InputTransport] Input channel constructed: 'ClientS', fd=230
[InputTransport] Input channel destroyed: 'ClientS', fd=231
[IInputConnectionWrapper] getExtractedText on inactive InputConnection
[IInputConnectionWrapper] requestCursorAnchorInfo on inactive InputConnection
[InsetsSourceConsumer] setRequestedVisible: visible=true, type=13, host=com.modev.plutester/crc64abfcbdcb04412aea.MainActivity, from=android.view.InsetsSourceConsumer.show:229 android.view.InsetsController.showDirectly:1437 android.view.InsetsController.controlAnimationUnchecked:1110 android.view.InsetsController.applyAnimation:1417 android.view.InsetsController.show:962 android.view.ViewRootImpl$ViewRootHandler.handleMessage:6098 android.os.Handler.dispatchMessage:106 android.os.Looper.loop:246 android.app.ActivityThread.main:8506 java.lang.reflect.Method.invoke:-2 
[SurfaceControl] hide : mNativeObject = 480531777920 - sc.mNativeObject = 480531879648 - Surface(name=Surface(name=5fb0fa1 InputMethod)/@0x49804dd - animation-leash)/@0x1b84285
[SurfaceControl] nativeSetFlags Done : Surface(name=Surface(name=5fb0fa1 InputMethod)/@0x49804dd - animation-leash)/@0x1b84285
[SurfaceControl] hide : mNativeObject = 480531777920 - sc.mNativeObject = 480531879648 - Surface(name=Surface(name=5fb0fa1 InputMethod)/@0x49804dd - animation-leash)/@0x1b84285
[SurfaceControl] nativeSetFlags Done : Surface(name=Surface(name=5fb0fa1 InputMethod)/@0x49804dd - animation-leash)/@0x1b84285
[SurfaceControl] release : mNativeObject = 480531879648 - Surface(name=Surface(name=5fb0fa1 InputMethod)/@0x49804dd - animation-leash)/@0x1b84285 / android.view.-$$Lambda$Rl1VZmNJ0VZDLK0BAbaVGis0rrA.accept:2 android.view.InsetsSourceControl.release:170 android.view.InsetsAnimationThreadControlRunner.releaseControls:119 android.view.InsetsAnimationThreadControlRunner.access$200:40 
[SurfaceControl] nativeRelease nativeObject s[480531879648]
[SurfaceControl] nativeRelease nativeObject e[480531879648]

The mentioned Entry:

<Entry Text="{Binding MaxPLU}" Keyboard="Numeric" FontSize="Medium" VerticalOptions="EndAndExpand" WidthRequest="80" HorizontalTextAlignment="Center" HorizontalOptions="Start">
                                            <Entry.Behaviors>
                                                <controls:NumberValidationBehavior/>
                                            </Entry.Behaviors>
                                        </Entry>

NumberValidationBehavior:

public class NumberValidationBehavior : Behavior<Entry>
    {
        protected override void OnAttachedTo(Entry entry)
        {
            entry.TextChanged += OnEntryTextChanged;
            base.OnAttachedTo(entry);
        }

        protected override void OnDetachingFrom(Entry entry)
        {
            entry.TextChanged -= OnEntryTextChanged;
            base.OnDetachingFrom(entry);
        }

        private static void OnEntryTextChanged(object sender, TextChangedEventArgs args)
        {

            if (!string.IsNullOrWhiteSpace(args.NewTextValue))
            {
                bool isValid = args.NewTextValue.ToCharArray().All(x => char.IsDigit(x)); //Make sure all characters are numbers

                ((Entry)sender).Text = isValid ? args.NewTextValue : args.NewTextValue.Remove(args.NewTextValue.Length - 1);
            }
        }
    }

Some clerification: TabView

1. MyPage1 -> Everything works as expected
2. MyPage2 -> Tapping in an entry kicks me back to MyPage1

Now I switch the pages: TabView

1. MyPage2 -> Everything works as expected
2. MyPage1 -> Tapping in an entry kicks me back to MyPage2

What am I doing wrong?

Update: This strange behavior just occurs, if I set the HorizontalTextAlignment of the entry. If its not set, the entry works as expected.

Answer 1

Another work around is to disable all controls (Entry/Editor) that opens the virtual keyboard when leaving the Tab and Enable when it is on Active Tab.

weirdly when you focused on one Entry/Editor and navigated through Tabs and when you are navigating back one page after the control focused, it will fire the Focused Event and the Tab will adjust to at least show the cursor on the Entry or Editor.

private bool _isLernViewActive;

    public bool IsLernViewActive
    {
        get { return _isLernViewActive; }
        set { _isLernViewActive = value;
            OnPropertyChanged(nameof(IsLernViewActive));
        }
    }

Xaml:

<Entry Text="{Binding MaxPLU}" Keyboard="Numeric" FontSize="Medium" VerticalOptions="EndAndExpand" WidthRequest="80" 
IsEnabled={Binding IsLernViewActive} HorizontalTextAlignment="Center" HorizontalOptions="Start">
      <Entry.Behaviors>
                                            <controls:NumberValidationBehavior/>
                                        </Entry.Behaviors>
                                    </Entry>