Android FlyoutPage problems when FlyoutPage::Flyout is a NavigationPage.

[Keflon]

Description

MauiFlyoutBug

Putting a navigation stack into a FlyoutPage Flyout property causes a few problems.

Repro:

1. Set a root-level flyout page
2. Set the Flyout property to a navigationPage
3. Push some ContentPage instances into the navigation page

iOS and WinUI

Both platforms add a 'back button' within the flyout and things work as expected.

Android

1. Pushing pages onto the nav stack renders the 'back button' in the FlyoutPage.Content page
   • It ought to be in the FlyoutPage.Flyout page but it is not.
2. Tapping the back button (on the wrong ContentPage) does not pop from FlyoutPage.Flyout.
3. Setting flyout.IsPresented = true; is not respected.
4. The flyout is reluctant to emerge using gestures. (using Pixel 5 emulator, debug build.)
   • In the sample, I cannot get the flyout to show until I have clicked the button on the Flyout.Content page.

Found it!

Steps to Reproduce

1. Create a File->New NET MAUI app.
2. Create a FlyoutPage.
3. Set FlyoutPage.Flyout to a new NavigationPage and push some ContentPage instances onto it.
4. Set FlyoutPage.Content to something.
5. Set App.MainPage to the FlyoutPage.
6. Set FlyoutPage.IsPresented to true.
7. Observe on Android the FlyoutPage.Flyout
   • IsPresented is not respected.
   • The Flyout cannot be coaxed into view until a button has been pressed on FlyoutPage.Content.
   • The Flyout does not have a back button when it should.
   • The Flyout Content does have a back button when it should not.

public App()
{
	InitializeComponent();

	var flyout = new FlyoutPage() { Title = "Navigation bug" };
	flyout.Flyout = new NavigationPage(new FlyoutContentPage()){Title="Needs a title"};
	flyout.Detail = new MainPage() { Title = "Another title" };
	MainPage = flyout;
	flyout.IsPresented = true;
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiFlyoutBug.FlyoutContentPage"
             Title="FlyoutContentPage"
             BackgroundColor="Cyan">
    <VerticalStackLayout>
        <Label 
            Text="Flyout Content"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Label x:Name="StackDepthLabel"
               Text="Stack depth: 0"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Button Text="Push a page" Clicked="Button_Clicked"/>
    </VerticalStackLayout>
</ContentPage>

public partial class FlyoutContentPage : ContentPage
{
    public FlyoutContentPage()
    {
        InitializeComponent();
    }

    string LabelText { get => StackDepthLabel.Text; set => StackDepthLabel.Text = value; }

    private void Button_Clicked(object sender, EventArgs e)
    {
        // Why doesn't the following line compile?
        //this.Navigation.PushAsync(new FlyoutContentPage() { this.StackDepthLabel.Text = "" });

        this.Navigation.PushAsync(new FlyoutContentPage() { LabelText = $"Stack depth: {this.Navigation.NavigationStack.Count}" });
    }
}

Link to public reproduction project repository

https://github.com/Keflon/MauiFlyoutBug

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Latest

Did you find any workaround?

Don't reference a NavigationPage in FlyoutPage::Flyout.

Relevant log output

No response

[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.

[Keflon]

Removed comment because it was intended for a different bug. Oops!

[AnnYang01]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Android emulator (13.0-API 33) with below Project: MauiFlyoutBug-master.zip Screenshot:

[vecalion]

We're experiencing the same issue with the latest .net 8 release.

@Keflon I wonder if you were able to find a workaround for this issue?

[Keflon]

@vecalion Unfortunately not. I've tried making my own MultiPage (as a likely route to working around this bug, as well as for another purposes) but ran into issue 18489 and couldn't work out the 'handler' requirement. Basically I couldn't work out how to use a MultiPage, but if anyone can point me at documentation or examples I'd have another look.

[bulubuloa]

We're experiencing the same issue with the latest .net 8 release.

[returnZro]

@PureWeen , is there any workaround for this? I face the same issue in Android (phone only) where a back button appears on the Detail page. This is a huge blocker for my migration from XForms. Would appreciate if this could be prioritized.

[EmilAlipiev]

is this issue still open? no workaround today?

[soroshsabz]

ITNOA

any plan for resolving this issue?

[mackayn]

Seeing the same problem on .NET8 8.0.100

[Shalini-Ashokan]

This issue has been verified in Visual Studio Code 1.104.0 with MAUI version 9.0.110 It can be reproduced on the Android platform.

https://github.com/user-attachments/assets/5419d9d7-594c-4237-936e-105aff6cd356