Unable to scroll to keyboard

[williambuchanan2]

Description

This issue has been closed off as a duplicate before - but it isn't. There are a few different keyboard problems which look similar but aren't.

With this one, I have a form with a lot of entry fields on it:

The last field (which I can scroll to before the keyboard shows) has 'reach me' in it:

When the keyboard shows (the result of tapping in one of the top fields) I can no longer scroll to the bottom of the page. So I can no longer get to the bottom fields. This is because the keyboard has rendered on top of those fields, and the page (despite being in a scroll view) no longer scrolls into view.

See example app from repository below.

Steps to Reproduce

Open example solution from repo below.
Tap 'Keyboard Problem' button.
Tap on a field on the top of the page - ensure the keyboard shows.
Now try to scroll to the bottom - you can't

Link to public reproduction project repository

https://github.com/williambuchanan2/MauiNavigation

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

Android 11 - 13, iOS 16

Did you find any workaround?

Only workaround so far is to add a fixed height (same height as keyboard) empty border to the bottom of every page.

Relevant log output

No response

[radderz]

@williambuchanan2 how are you determining the height of the keyboard as part of your work around? Or are you just adding the additional height at all times and it's just a fixed value to enable scrolling to the bottom?

I am using Maui.Blazor and have the same issue where the web elements get covered by the keyboard and I haven't found a simple way to capture when the keyboard becomes visible and what the height of the keyboard is on android/iOS.

#14197

[radderz]

By doing this,

I find that iOS and Android both react the same way, where they resize the Content Page to the remainder of the screen, if this is sufficient for your issue you can do the below. iOS does this by default and Android by default seems to do nothing or maybe does the pan option (which doesn't work if the item is at the bottom of the scroll view.

using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;

namespace SoftKeyboardBug;

public partial class App : Microsoft.Maui.Controls.Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new MainPage();

                On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
        }
}

[williambuchanan2]

By doing this,
I had already tried it but it doesn't fix the problem for me. I am seeing the problem on both Android and iOS.

[williambuchanan2]

@williambuchanan2 how are you determining the height of the keyboard as part of your work around?

To be honest my workaround is a quick band aid because I don't have time to fix it. I just set it to a fixed height.

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[PureWeen]

By doing this,

I find that iOS and Android both react the same way, where they resize the Content Page to the remainder of the screen, if this is sufficient for your issue you can do the below. iOS does this by default and Android by default seems to do nothing or maybe does the pan option (which doesn't work if the item is at the bottom of the scroll view.

using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;

namespace SoftKeyboardBug;

public partial class App : Microsoft.Maui.Controls.Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new MainPage();

                On<Microsoft.Maui.Controls.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
        }
}

This is the solution if you want the user to be able to scroll to the bottom while the keyboard is up. By default Android will just pan the Window up the amount required for the field to become visible. This means a portion of the view will be obscured because view isn't resizing.

That being said, some areas we should test, and possibly improve.

1. I'm curious how this worked in XF for comparison
2. Alongside the Keyboard APIs we want to add it would probably be useful to indicate the size of the keyboard as well. This way if the keyboard opens then users can react according to their need.

[williambuchanan2]

I decided to try it again. Sure enough it works for Android (not sure why it didn't the last time I tried it), but iOS is still not working. Here is what I see. I can't scroll past the 'Mobile' field:

[radderz]

I decided to try it again. Sure enough it works for Android (not sure why it didn't the last time I tried it), but iOS is still not working. Here is what I see. I can't scroll past the 'Mobile' field:

You'll possibly need the view to be in a scroll view if it isn't already so that the view which is now shrunk can fit in the content page without overflowing past the bottom.

In my case I was using maui blazor which is a web view and scrollable. The bottom of my control was the top of the keyboard.

[williambuchanan2]

It already is. Here is the Xaml for the top of the page:

    <ContentPage.Content>
            <ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0" Padding="0">
                <VerticalStackLayout VerticalOptions="Center">

[ghost]

Hi @williambuchanan2. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Not repro on android platform with sample project.
MauiNavigation-main.zip