FlyoutItem in overlow menu not fully interactable

Natriss commented 1 month ago

Description

When you have a bunch of ShellContent in a FlyoutItem and the overflowing items are in a overflow menu. Those items are not fully interactable.

https://github.com/user-attachments/assets/31d93402-2e30-45e8-8950-80f5016c7cf5

Steps to Reproduce

Create a basic MAUI app

Change the Shell content with this

<ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" />
<FlyoutItem Title="Header">
<ShellContent Title="Test1" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test2" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test3" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test4" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test5" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test6" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test7" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test8" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test9" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test10" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test11" ContentTemplate="{DataTemplate local:MainPage}" />
<ShellContent Title="Test12" ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>

Run the app as a Windows app.
Head over to the Header section.
Make the Window smaller.
Open the overflow menu
Try and select an overflow item (not hover over the text, just the padding/margin/whitespace)

Link to public reproduction project repository

No response

Version with bug

8.0.70 SR7

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Closed similar issues:

When FlyoutItem is used instead of ShellContent, the menu item text is invisible (#14688), similarity score: 0.81
[regression/8.0.0-preview.3.8149] Header in flyout menu makes first menu item not clickable on IOS (#17965), similarity score: 0.81
MAUI Shell Flyout unwanted click through behavior (#21097), similarity score: 0.81
Flyout Items not working properly (#15463), similarity score: 0.80
Shell: Flyout menu items are missing in MAUI windows (#9103), similarity score: 0.80

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

Natriss commented 1 month ago

The same thing happens when you surround them in a Tab control.

<ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" />
<FlyoutItem Title="Header">
<Tab>
    <ShellContent Title="Test1" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test2" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test3" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test4" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test5" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test6" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test7" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test8" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test9" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test10" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test11" ContentTemplate="{DataTemplate local:MainPage}" />
    <ShellContent Title="Test12" ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
</FlyoutItem>

https://github.com/user-attachments/assets/9c6775f4-96f6-47b7-a406-621e553da4c2

kevinxufei commented 1 month ago

I can repro this issue at Windows platform on the latest 17.11.0 Preview 5.0 (8.0.70 & 8.0.61). MauiApp5.zip

dotnet / maui