[iOS] Shell.TabBarIsVisible and Shell.NavBarIsVisible wrong behaviour if 5 Tabs and more

EPS-Lac commented 2 years ago

Description

Context

I have a project where I want to use a MAUI Shell application with a TabBar. Since the customization of the default Shell.TabBar is extremely limited I created a custom TabBar control and hide the Shell.TabBar on all pages. I still did add the pages to the in the AppShell.xaml though and noticed a strange behaviour that most likely is a bug.

Bug Description

When there are more than 5 elements in a Shell.TabBar, the additional tabs are added to a "more" button/tab (as supposed to and described in the docs). With the Shell.TabBarIsVisible and the Shell.NavBarIsVisible set to false, both elements are hidden from the user in the normal case, BUT if you navigate to a route that would be placed under the "more" button, the TabBar becomes visible and the "more" menu is opened up, instead of just opening the page and keep the TabBar hidden. In addition, once you click on the intended page again inside the "more" menu that pops up to get to that page, the NavBar (< more) is visible again.

This only happens on iOS, on Android everything works as I would expect (the page opens up, TabBar and More menu stay hidden, NavBar is hidden as well).

Screenshots SampleProject

There are 6 Tabs in the sample project, all having the MainPage.xml as their page to simplify the code, with six Buttons to navigate to the different pages when the TabBar is hidden. Note: The iOS screenshots are done using the iOS simulator, but it's the same when using a real iOS (tested with iPhone 12).

With TabBar and NavBar visible (for reference): grafik

With TabBar and NavBar hidden while clicking on any tab from 1-4: grafik

When clicking on tab 5 or 6 (still with TabBar and NavBar hidden): grafik

After clicking on tab 5 in the "more" menu that opened up (see previous screenshot), while in tab 5: grafik When you click the "back" navigation you get to the "more" menu again and can press another tab from there. As soon as you're back on tab 1-4 the TabBar and NavBar are hidden again. It's just within those "more" tabs.

For Android, all Tabs from 1-6 behave and look the same. No "more" menu popping up, NavBar and TabBar stay hidden as expected. Tab 5 on Android (same for all tabs): grafik

Steps to Reproduce

Create a new MAUI App project (using the VS2022 template)
Add a with more than 5 tabs to the AppShell.xaml (you can add different pages for each or use the MainPage for all, but make sure to have different Routes for all of them)
Add Buttons to navigate to the different tabs (especially the tabs at position 5+ that are moved to the "more" tab menu)
Add the Shell.TabBarIsVisible="false" and Shell.NavBarIsVisible="false" to the MainPage.xaml (or elsewhere)
Run the app on Android and on iOS and note the different behaviour when navigating to Tab 5 or higher

AppShell.xaml

<Shell
    x:Class="MauiTabBarIsVisibleAndMore.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiTabBarIsVisibleAndMore">
    <TabBar>
        <Tab Title="Tab 1">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab1" />
        </Tab>
        <Tab Title="Tab 2">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab2" />
        </Tab>
        <Tab Title="Tab 3">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab3" />
        </Tab>
        <Tab Title="Tab 4">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab4" />
        </Tab>
        <Tab Title="Tab 5">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab5" />
        </Tab>
        <Tab Title="Tab 6">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="Tab6" />
        </Tab>
    </TabBar>
</Shell>

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTabBarIsVisibleAndMore.MainPage"
             Shell.NavBarIsVisible="false"
             Shell.TabBarIsVisible="false">
    <ScrollView>
        <VerticalStackLayout 
            Spacing="10" 
            Padding="30,0" 
            VerticalOptions="Center">
            <Button
                Text="Tab 1"
                Clicked="OnTab1Clicked"/>
            <Button
                Text="Tab 2"
                Clicked="OnTab2Clicked"/>
            <Button
                Text="Tab 3"
                Clicked="OnTab3Clicked"/>
            <Button
                Text="Tab 4"
                Clicked="OnTab4Clicked"/>
            <Button
                Text="Tab 5"
                Clicked="OnTab5Clicked"/>
            <Button
                Text="Tab 6"
                Clicked="OnTab6Clicked"/>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

MainPage.xaml.cs


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

    private async void OnTab1Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab1");
    }

    private async void OnTab2Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab2");
    }

    private async void OnTab3Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab3");
    }

    private async void OnTab4Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab4");
    }

    private async void OnTab5Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab5");
    }

    private async void OnTab6Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Tab6");
    }
}

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15.5

Did you find any workaround?

Keep the items in the TabBar less than 5, so no "more" tab menu is required. Add pages that don't need to be in the TabBar (in my case all, since I have the TabBar hidden all the time anyways) as simple ShellItems outside of the TabBar (you might need to keep at least 1 page in the TabBar for it to still work, not sure.)

For my project, I've added them in the AppShell.xaml.cs like this:

// Shell Item not in the TabBar
Items.Add(new ShellItem
{
    Route = "home",
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(HomePage)) } }
});

// TabBar Items (keep less than 5 of these)
TabBar.Items.Add(new Tab
{
    Route = "summary",
    Items = { new ShellContent { ContentTemplate = new DataTemplate(typeof(SummaryPage)) } }
});

And in the AppShell.xaml I have a TabBar named TabBar:

<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.AppShell">
    <TabBar x:Name="TabBar" />
</Shell>

Relevant log output

No response

roughiain commented 2 years ago

Similar issue on Xamarin https://github.com/xamarin/Xamarin.Forms/issues/11446 opened July 2022 assigned to @PureWeen

EPS-Lac commented 2 years ago

Ah, thanks! I did look through the MAUI issues to see if there is already a ticket for this, but didn't think of checking the Xamarin.Forms. But since the other one is still open (created almost two years ago) I don't think this will get any attention... At least not in Xamarin.Forms anymore. Hopefully there will be a fix at some point for MAUI.

kristinx0211 commented 2 years ago

verified repro on IOS15.4.

pocki commented 1 year ago

Same on Android. I also have both set to invisible Shell.NavBarIsVisible="false" Shell.TabBarIsVisible="false" and add Click/Tap on "More" both gets visible.

.NET 7.0.5 Android 9.0