Keyboard focus does not shift to a newly opened modal page: Pressing enter clicks the button on the page beneath the modal page

janne-hmp commented 4 months ago

Description

On Windows in .NET MAUI 8.0 and 9.0 Preview 4, the keyboard focus does not shift to the newly opened modal page (opened using Navigation.PushModalAsync), but remains on the main page (first page of the app). You can press enter to click the button on the page beneath the modal page.

Steps to Reproduce

Make the default MAUI app
Create a new MAUI ContentPage named ModalTestPage.
Change ModalTestPage's background color to Beige by adding to the page's XAML: BackgroundColor="Beige" .

Add the following code to the MainPage button:

        var modalPage = new ModalTestPage();
        Navigation.PushModalAsync(modalPage);

(This is from other example of having a problem with maximizing, but I keep it here just in case it is relevant.) Add to the top of MauiProgram.cs the following:

using Microsoft.Maui.LifecycleEvents;

and add to builder the following:

#if WINDOWS
                .ConfigureLifecycleEvents(events =>
                {
                    // Make sure to add "using Microsoft.Maui.LifecycleEvents;" in the top of the file 
                    events.AddWindows(windowsLifecycleBuilder =>
                    {
                        windowsLifecycleBuilder.OnWindowCreated(window =>
                        {
                            window.ExtendsContentIntoTitleBar = false;
                            var handle = WinRT.Interop.WindowNative.GetWindowHandle(window);
                            var id = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(handle);
                            var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(id);
                            switch (appWindow.Presenter)
                            {
                                case Microsoft.UI.Windowing.OverlappedPresenter overlappedPresenter:
                                    overlappedPresenter.SetBorderAndTitleBar(false, false);
                                    overlappedPresenter.Maximize();
                                    break;
                            }
                        });
                    });
                })
#endif

Add a tap recognizer to the label on ModalTestPage:

XAML:

        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>

C#: (closes the modal window, so you can check what's going on beneath):

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        Navigation.PopModalAsync();
    }

Build and start the app.
Press the button. A modal page opens. (Note that the modal page (beige) does not cover the whole window, but this is not relevant in this example.)
Press enter key on your keyboard 10 times. This in fact presses the button on MainPage beneath.
Click the "Welcome to .NET MAUI!" label 11 times (11 modal pages have appeared).
The button says it has been clicked 11 times.

Link to public reproduction project repository

Can make one if need be, but this is very easy to replicate.

Version with bug

9.0.0-preview.4.10690

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11

Did you find any workaround?

No. All potential workarounds are complicated and imperfect.

Relevant log output

No response

github-actions[bot] commented 4 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Keyboard tabbing around a Modal Page cycles focus onto previous page. (#19105), similarity score: 0.83
Modal navigation not working when the window is not active (#18982), similarity score: 0.80
[Android] Page appears to receive focus (#14692), similarity score: 0.78
Android keyboard not hiding if open a new page with Navigation.OpenModalAsync (#13088), similarity score: 0.78
PushModal on Windows does not show back button (#6760), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

kevinxufei commented 4 months ago

Verified this issue with Visual Studio 17.11.0 Preview 2.0 (9.0.0-preview.5.24307.10 & 9.0.0-preview.4.10690). Can repro on Windows platform.

Saurbaum commented 3 months ago

I can see the same issue on iOS as well. The more irritating thing there is there is no tab to regain focus into the modal control.

mattleibow commented 1 month ago

/similarissues

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

[Windows] Keyboard focus does not shift to a newly opened modal page: Pressing enter clicks the button on the page beneath the modal page (#22938), similarity score: 0.99
Keyboard tabbing around a Modal Page cycles focus onto previous page. (#19105), similarity score: 0.82
iOS/Windows touch inputs sent to controls behind (#24608), similarity score: 0.80
Modal navigation not working when the window is not active (#18982), similarity score: 0.78
[Android] Page appears to receive focus (#14692), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

mattleibow commented 1 month ago

Note to myself (or future someone) this may be a repro: https://github.com/TomRobson-me/KeyboardTabBug.git

MitchBomcanhao commented 1 month ago

I'm getting similar issues on android, on maui 8.0.82 a new modal page is shown, and typing on the physical keyboard (or using its tab control a few times) will trigger a control from the underlying page which then displays a picker UI over the top of my modal page.

dotnet / maui