[Bug] [iOS] Xamarin Shell Flyout navigates incorrectly with more than 4 items

[dan-matthews]

Description

If you use a Xamarin Shell flyout menu with more than 4 items on an iOS device, then selecting the 5th item or below will slide up the 'More' menu, requiring a second selection. This is not ideal behaviour.

On Android navigating to any item in the flyout navigates directly to it.

Steps to Reproduce

1. Create a Xamarin Forms project (I used Xaminals)
2. Create a flyout menu
3. Copy-paste a tab so that you have at least 6 tabs
4. Run the project on an iOS simulator/phone
5. Select the 5th option in the Flyout menu

Expected Behavior

App will navigate directly to route specified on 5th item.

Actual Behavior

App shows the More popup, requiring a second selection of the item (will now be top item in the 'More' list).

Basic Information

• Version with issue: 4.8.0.1269, 4.0.8.0.1560
• Last known good version: Unknown
• IDE: VS 2019
• Platform Target Frameworks:
  • iOS: 11, 12
  • Android: n/a
  • UWP: n/a
• Android Support Library Version: n/a
• Nuget Packages: n/a
• Affected Devices: All iOS

[gitkrm]

don't subscribe, I'm getting over 100 emails a day from this subscription

[PureWeen]

@dan-matthews can you try out 5.0 pre3 and if you still see the issue attach a repro?

I'm not quite seeing what you're talking about here..

I'm seeing the same behavior on Android and iOS for this one

[pictos]

@PureWeen this bug still happens. :/
I'm doing some investigation, but the cause is the ViewController for all items inside the More tab are the MoreNavigationController.

[pictos]

I think this one is related to:
#12564
#7594
#11446

[jsuarezruiz]

Seems to be the same (or related) with #11446

[jfdomitor]

A workaround seems to be to declare separate flyout items instead of using FlyoutDisplayOptions="AsMultipleItems".

This does not work

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
   <ShellContent Title="Start"	Route="StartPage"   ContentTemplate="{DataTemplate local:StartPage}"  />
   <ShellContent Title="Check Out"	Route="CheckOutPage"   ContentTemplate="{DataTemplate local:CheckOutPage}"  />
   <ShellContent Title="Check In"	Route="CheckInPage"    ContentTemplate="{DataTemplate local:CheckInPage}" />
  <ShellContent Title="Consume"	Route="ConsumePage"  ContentTemplate="{DataTemplate local:ConsumePage}"  />
  <ShellContent Title="Physical Inventory" Route="PhysInventPage"  ContentTemplate="{DataTemplate local:PhysInvPage}"  />
  <ShellContent Title="About"	Route="AboutPage"   ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

While this works:

<FlyoutItem Title="Start">
  <ShellContent Route="StartPage"    ContentTemplate="{DataTemplate local:StartPage}"  />
</FlyoutItem>
<FlyoutItem Title="Check Out">
  <ShellContent Route="CheckOutPage"  ContentTemplate="{DataTemplate local:CheckOutPage}" />
</FlyoutItem>
<FlyoutItem Title="Check In">
 <ShellContent	Route="CheckInPage"    ContentTemplate="{DataTemplate local:CheckInPage}"  />
</FlyoutItem>
<FlyoutItem Title="Consume">
 <ShellContent Route="ConsumePage"      ContentTemplate="{DataTemplate local:ConsumePage}" />
</FlyoutItem>
<FlyoutItem Title="Physical Inventory">
 <ShellContent  Route="PhysInventPage"  ContentTemplate="{DataTemplate local:PhysInventPage}" />
</FlyoutItem>
<FlyoutItem Title="About">
 <ShellContent 		Route="AboutPage"       ContentTemplate="{DataTemplate local:AboutPage}"  />
</FlyoutItem>

[edgiardina]

renders the 'more' menu unusable and restricts you to five tabbar options. A vote here to resolve this, please.