[regression/8.0.0] [iOS] - Page of (first) FlyoutItem not loading when FlyoutHeader is available

[MAUIoxo]

Description

I have a very simple Flyout-Scenario under iOS with a FlyoutHeader and some FlyoutItems to load the corresponding pages.

I can click on the "Settings"-FlyoutItem and the "Settings"-Page is loaded. I can click on the "Help"-FlyoutItem and the "Help"-Page is loaded without any problems.

But, when a FlyoutHeader is available, the "MainPage"-FlyoutItem can't be clicked and behaves like it is disabled and the "MainPage" is not loaded when corresponding FlyoutItem is clicked.

When the FlyoutHeader is removed the "MainPage"-FlyoutItem can be clicked and the corresponding page is loaded.

Hint: On Android everything works as expected!

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="FlyoutItemPageNotLoadingApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:FlyoutItemPageNotLoadingApp.Pages"
    Shell.FlyoutBehavior="Flyout">

    
    <Shell.FlyoutHeader>
        <Grid HeightRequest="150">
            <Image Source="radiant_gradient.png" Aspect="AspectFill"/>
        </Grid>
    </Shell.FlyoutHeader>

    

    <FlyoutItem FlyoutIcon="dotnet_bot.png" Title="MainPage" FlyoutDisplayOptions="AsSingleItem">
        <ShellContent Icon="dotnet_bot.png" Title="MainPage" ContentTemplate="{DataTemplate pages:MainPage}" Route="MainPage" Shell.PresentationMode="Animated" />
    </FlyoutItem>

    <FlyoutItem FlyoutIcon="dotnet_bot.png" Title="Settings" FlyoutDisplayOptions="AsSingleItem">
        <ShellContent Icon="dotnet_bot.png" Title="Settings" ContentTemplate="{DataTemplate pages:Settings}" Route="Settings" Shell.PresentationMode="Animated" />
    </FlyoutItem>

    <FlyoutItem FlyoutIcon="dotnet_bot.png" Title="Help" FlyoutDisplayOptions="AsSingleItem">
        <ShellContent Icon="dotnet_bot.png" Title="Help" ContentTemplate="{DataTemplate pages:Help}" Route="Help" Shell.PresentationMode="Animated" IsVisible="True"/>
    </FlyoutItem>



    <Shell.FlyoutFooter>
        <Grid HeightRequest="60" BackgroundColor="{StaticResource Gray900}">
            <Label TextColor="White" Text="Copyright ..." HorizontalOptions="Center" VerticalOptions="Center"/>
        </Grid>
    </Shell.FlyoutFooter>


</Shell>

Steps to Reproduce

1. Start with the XAML above
2. Click on "Settings"-FlyoutItem and Page is loaded
3. Click on "Help"-FlyoutItem and Page is loaded
4. Click on "MainPage"-FlyoutItem, nothing happens. Page is not loaded and Flyout also is not closed. Behaves like it is disabled
5. Remove "FlyoutHeader" from XAML above
6. Click on "Settings"-FlyoutItem and Page is loaded
7. Click on "Help"-FlyoutItem and Page is loaded
8. Click on "MainPage"-FlyoutItem and Page is loaded as expected

Link to public reproduction project repository

https://github.com/MAUIoxo/FlyoutItemPageNotLoadingApp_17432

Version with bug

8.0.100-rc.1.23455.8
8.0.100-preview.7.23376.3 (coming with VS 2022 17.8)

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

Worked well with Visual Studio 2022 17.6 and .NET 7

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No workaround could be found other than removing the FlyoutHeader which is not what is wanted

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.

[MAUIoxo]

I can understand your argument that time and resources are scarce, but this almost means you can't use FlyoutHeaders at all (probably for long time then). If this can't be fixed for November Release, this will be postponed for very looong time until the next updates are released.

Well, I don't want to put pressure on you, but I am seriously asking how could this happen - a simple Standard FlyoutHeader with FlyoutItems underneath that used to work so far. Aren't there tests available to see if something breaks when there are fixes or new features?

[pledi]

Fascinating, I thought that I wasn't tapping on it correctly.
But I do have something to add, when navigating a second time (to another different page) it seems like I can tap on the first element again.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 2.0(8.0.0-rc.1.23419.4). Repro on iOS 16.4, not repro on Android 13.0-API33 with below Project:
FlyoutItemPageNotLoadingApp.zip

[MAUIoxo]

I apologize for this question, but now that it is verified as in the Bug description what is the course of action towards resolving the issue - will it be addressed for the November release of .NET 8, or is this most likely scheduled for a much later update?

[eqmarcin]

I have spent half day yesterday trying to figure out why is me flyout not working until someone sent me a link to this bug.
I have no idea how something like that has got broken in "the best" MAUI version so far? I hope a fix will be released in GA later this month.

Temp fix that works for me - add empty item at the start:

<FlyoutItem Title="">
    <ShellContent Title="" />
</FlyoutItem>

[MAUIoxo]

I have spent half day yesterday trying to figure out why is me flyout not working until someone sent me a link to this bug. I have no idea how something like that has got broken in "the best" MAUI version so far?

My experience is that when something breaks it's a sign of missing tests

But, I have to admit, that currently I don't know if there are any that check UI things like that and how they are implemented. This is generally the case when you have things working before and after a change do not work anymore.

[jges42]

Please fix this ASAP, apple forces us to use lates OS, MAUI forces us to use dotnet 8.0 to use lates ios
we have no other option than to ship with the empty flyoutitem workaround for now wich is sad

[jcsnider]

@jges42 -- please try my workaround if you haven't already
#17965 (comment)

[jges42]

Thanks @jcsnider this works better than an empty item!

[MAUIoxo]

I can understand everyone that argues like @jges42 did. For me it is is a must to get it stable and without such obvious bugs. So, for me no more features, please fix bugs and then look forward on new features you have in your backlog. Otherwise people will leave for good due to bad reputation

[PureWeen]

Duplicate of #17965

[nathenxbrewer]

@eqmarcin I tried your workaround and I get an error on iOS stating "No Content found for ShellContent". Any ideas on another workaround? Thanks

[eqmarcin]

@nathenxbrewer try other solutions from #17965 and play around with header margin and/or padding