Entry / Input field got hidden behind keyboard in SfTabview

[Jun]

Hi, 

I'm having issue with the Xamarin forms Entry input being hidden behind OS Keyboards on both Android and iOS platform. 

On Android:
✅ Tab 1 Entry on tapping will trigger keyboard and push the Entry to appear above the keyboard.
❌ Tab 2 Entry on tapping will trigger keyboard but it didn't push the Entry to appear above the keyboard causing it's not visible and hard for input to proceed.

On iOS:
❌  Both Tab 1 and Tab 2 Entry on tapping will trigger keyboard to appear on top of the entry.

✅ This situation only happens if the Entry is inside the SfTabView. 
I'm using the SfTabView version 19.4.0.53 

I've attached the Video recording and the source code as per reference to fasten up debugging process :) 


Hope to hear from you soon.

Thanks, 
Jun.

Attachment: KeyboardBug_26dfd755.zip

[Suganya Sethuraman]

Hi Jun,

Query 1: “Entry input being hidden behind OS Keyboards in Android”

Please use the following code in the MainActivity class of Android project after the LoadApplication to resolve the issue.

Code snippet  

protected override void OnCreate(Bundle savedInstanceState)  

        {  

            base.OnCreate(savedInstanceState);  

  

            AndroidEnvironment.UnhandledExceptionRaiser += AndroidEnvironment_UnhandledExceptionRaiser;  

            TaskScheduler.UnobservedTaskException += TaskScheduler_UnobservedTaskException;  

            AndroidEnvironment.UnhandledExceptionRaiser += AndroidEnvironment_UnhandledExceptionRaiser;  

  

  

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);  

            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);  

  

            var app = new App();  

            LoadApplication(app);  

            Window.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);  

        }  

Query 2: “Entry input being hidden behind OS Keyboards in iOS”

To resolve the reported issue in iOS, please use ScrollView as shown in the following code snippet,

 

Code snippet  

                <tabView:SfTabItem> 

                    <tabView:SfTabItem.Content> 

                        <Grid 

                            BackgroundColor="Blue" 

                            HorizontalOptions="CenterAndExpand" 

                            VerticalOptions="CenterAndExpand"> 

                            <ScrollView> 

                            <StackLayout VerticalOptions="Center"> 

                                <Label 

                                    FontSize="24" 

                                    Text="Tab 2" 

                                    TextColor="White" /> 

                                <Label Text="Entry Input:" TextColor="White" /> 

                                <Entry 

                                    BackgroundColor="White" 

                                    FontSize="18" 

                                    HorizontalTextAlignment="Center" 

                                    VerticalOptions="Center" /> 

                            </StackLayout> 

                            </ScrollView> 

                        </Grid> 

                    </tabView:SfTabItem.Content> 

Please have a sample from the below link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewEntry192901924

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Jun,

Thanks for the update.

We are glad that your issue is resolved. Please let us know if you require any further assistance.

Regards,
Suganya Sethuraman. 

[Jun]

Hi Suganya Sethuraman,

The solution stated in post above do solve the keyboard issue on both Android and iOS.

Thanks for the assistance! 



Thanks,

Jun.

[Jun]

Hi Suganya Sethuraman,

Is there any possibility to apply the following code
 Window.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);  

on the specific page only? 
Because it do affect some output.

Thanks, 
Jun.

[Suganya Sethuraman]

Hi Jun,

Query: Is there any possibility to apply the code “Window.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);  “ on the specific page only?

We have achieved your requirement by including the code "Window.SetSoftInputMode(Android.Views.SoftInput.AdjustResize);" in the OnAppearing override method of the MainPage.cs file, as shown in the code snippet below.

Code snippet 

protected override void OnAppearing() 

        { 

            base.OnAppearing(); 

            App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize); 

        } 

 

        protected override void OnDisappearing() 

        { 

            base.OnDisappearing(); 

            App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Pan); 

        } 

Please have the modified sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTabViewSampleModified-222165257

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman.