Error in shell flyout

[manonaga2188]

Description

If we add more than 5 shell content to flyout item, shows more page This occurs only in iOS and it works perfect in other platforms.

Same as Issue #12587.

Please check reproduction repo.

Steps to Reproduce

Add more than 5 shell content to FlyoutItem. check the repo.

Link to public reproduction project repository

https://github.com/nmano2188/ShellNavMauiApp1

Version with bug

7.0.49

Last version that worked well

7.0.49

Affected platforms

iOS

Affected platform versions

iOS

Did you find any workaround?

No response

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.

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 4.0. Repro on iOS 16.4 .NET 8, not repro on Windows 11 and Android 13.0-API33 with below Project: 15770.zip

[manonaga2188]

Any update on this?

[AkashSaxenaSaviantConsulting]

Any update on this ticket ?

[tartuff22]

I use a workaround until the bug is fixed. You can split your original FlyoutItem into multiple ones, so that you have no more than 4 items in each new FlyoutItem. In this case, Shell will create no more than 4 tabs per FlyoutItem. Here's AppShell.xaml and screenshots from iPhone 12 iOS 16.5

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NXTransport.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"    
    xmlns:views="clr-namespace:NXTransport.Views"
    xmlns:controls="clr-namespace:NXTransport.Controls"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:vm="clr-namespace:NXTransport.ViewModels.Menu"
    x:DataType="vm:MenuViewModel">

    <Shell.FlyoutHeader >
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <Shell.FlyoutFooter>
        <controls:FlyoutFooter />
    </Shell.FlyoutFooter>

    <FlyoutItem Route="menu"
                FlyoutDisplayOptions="AsMultipleItems">

        <ShellContent
            Title="{Binding LiveDocketTitle, Mode=OneWay}"
            Icon="ic_drawer_livejobs"
            Route="JobListPage"
            ContentTemplate="{DataTemplate views:JobListPage}" />

        <ShellContent
            Title="Archive Dockets"
            Icon="ic_drawer_archivedjobs"
            Route="JobListPageA"
            ContentTemplate="{DataTemplate views:JobListPage}" />

        <ShellContent
            Title="Scan to ..."
            Icon="ic_drawer_scantovan"
            Route="ScanningPage"
            ContentTemplate="{DataTemplate views:ScanningPage}" />

        <ShellContent
            Title="Messages"
            Icon="ic_drawer_messages"
            Route="ConversationListPage"
            ContentTemplate="{DataTemplate views:ConversationListPage}" />

    </FlyoutItem>

    <FlyoutItem Route="menu2"
                FlyoutDisplayOptions="AsMultipleItems">

        <ShellContent
            Title="Go on break"
            Icon="ic_drawer_break"
            Route="BreakPage"
            ContentTemplate="{DataTemplate views:BreakPage}" />

        <ShellContent
            Title="Settings"
            Icon="ic_drawer_cog"
            Route="SettingsPage"
            ContentTemplate="{DataTemplate views:SettingsPage}" />

        <ShellContent
            Title="Log out"
            Icon="ic_drawer_logout"
            Route="Logout"
            ContentTemplate="{DataTemplate views:LogoutPage}" />

    </FlyoutItem>

    <ShellContent
            x:Name="LoginPage"
            Title="Login"
            ContentTemplate="{DataTemplate views:LoginPage}"
            Route="LoginPage"
            FlyoutItemIsVisible="False" />
</Shell>