[Maui Blazor] Input overlapped by keyboard

[JeanSebGwak]

Description

When I tap an input (An InputText for example) near the bottom of the page, the virtual keyboard overlapping it. Seems it's the same bug mentionned here : https://github.com/dotnet/maui/issues/14197 The answer written on August 11 says the issue was fixed, but it seems not.

As the steps to reproduce are really simple, I didn't find useful to provide a reproduction project.

My SDK version is 8.0.100, not 8.0.3 (Didn't have this choice in the dedicated dropdown). I am on a physical device, Sony Xperia IV Android 13.

Edit : Maybe related to https://github.com/dotnet/maui/issues/18041

Steps to Reproduce

1 - Create a new MAUI Blazor project 2 - Add a bunch of InputText in the home page (Home.razor) 3 - Launch the app (I tried on a physical device) 4 - Tap an InputText near the bottom of the page to see the keyboard overlapping it

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 13

Did you find any workaround?

No response

Relevant log output

No response

[williambuchanan2]

I am seeing the same thing. It is so frustrating that these keyboard issues are still happening in .NET 8. How can this not be top priority?

My main grips is what you reported - as soon as you go to the lower half of the screen you can't see anything because the keyboard covers it and the page doesn't scroll - end result is you can't see what you are typing.

It feels like someone just needs to dedicate some time to fix all these keyboard issues so that they can all be put to bed.

[monster-echo]

Is there any workaround?

[williambuchanan2]

Is there any workaround?

Looks like they are working on it now:

https://github.com/dotnet/maui/issues/19214

The closest I came to a workaround was binding the height of the parent container to the height of the screen ( Grid HeightRequest={Binding TheHeight}), then when the keyboard shows I subtract 250 from that value.

Use the below to detect keyboard showing:

if IOS

    var noti = UIKeyboard.Notifications.ObserveDidShow((sender, args) => {
        TheHeight= TheHeight- 250;
    });

endif

Note that the first tap into the editor doesn't work, but subsequent taps do, so it's not a perfect workaround but the closest I have got after a week working on it!

[qualitycodes]

Found a workaround here - https://github.com/dotnet/maui/issues/14197

[Zhanglirong-Winnie]

Verified this issue with Visual Studio 17.10.0 Preview 3(8.0.3 &8.0.7&8.0.20). Can repro on android platform.

[mkArtakMSFT]

This doesn't seem to be Blazor related and may very well be the dupe of the linked issue.

[michaelprabhuu]

      using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;

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

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

The above code works well if you add in the App.xaml.cs file

[lommez]

@JeanSebGwak take a look that this:

https://github.com/dotnet/maui/issues/14197

[caliberdigitalllc]

Reporting here from my other created issue (that was referred to this issue), On 9 preview 7, on a Pixel 7 API 35 simulator, the issue still persists.

I tried this on both my existing app (above) and a brand new 9p7 boilerplate blazor hybrid app where all I did was this in home.razor:

@page "/"

<h1>Hello, world!</h1>

<p>Welcome to your new app.</p>

<div class="container mt-4">
    @for (int i = 1; i <= 10; i++)
    {
        <div class="row mb-3">
            <div class="col">
                <input type="text" class="form-control" placeholder="Enter text here">
            </div>
        </div>
    }
</div>

and this in app.xaml.cs:

using Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;
using Application = Microsoft.Maui.Controls.Application;

namespace MauiApp2 {
    public partial class App : Application {
        public App() {
            InitializeComponent();

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

        protected override Window CreateWindow(IActivationState? activationState) {
            return new Window(new MainPage());
        }
    }
}

And if you tap in one of the last text boxes you can easily see the issue reproduce, even in a brand new barebones maui android app.

[lommez]

Anyone have success to implement that behavior in a .Net Maui Hybrid application? I´ve tried a lot, but none have worked.

[lommez]

This is a very old issue, any updates on this? In .Net 9.0 this is going to be fixed?