[Bug] Shell Flyout is closing if touching the second half of the FlyoutFooterTemplate on Xamarin 5

[AndreasReitberger]

Description

I'm using the Xamarin.Forms Version 5.0.0.1874 and implemented the FlyoutFooterTemplate in my AppShell.xaml file. In this I have two buttons to either restart the timer or to reconnect to the websocket. Please see the code snippet below.

    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <ContentView 
                BackgroundColor="{DynamicResource Gray-100}"
                HeightRequest="{OnIdiom Phone=64, Tablet=80, Default=64}">
                <Grid
                    Margin="15,4,4,30"
                    Style="{StaticResource DefaultGridStyle}"
                    >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <!-- Time State -->
                    <buttons:SfButton 
                        Style="{StaticResource IconButtonStyle}" 
                        Command="{Binding RestartTimerCommand}"
                        ShowIcon="False"
                        Margin="0"
                        >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Label 
                                FontSize="{OnIdiom Phone=14, Tablet=16, Default=14}"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                >
                                <Label.Style>
                                    <Style TargetType="Label" BasedOn="{StaticResource MaterialFontFamilyIconLabelStyle}">
                                        <Setter Property="TextColor" Value="{DynamicResource Green}"/>
                                        <Setter Property="Text" Value="{StaticResource MaterialDesign_AvTimer}"/>
                                        <Style.Triggers>
                                            <!-- Error -->
                                            <DataTrigger 
                                        TargetType="Label" 
                                        Binding="{Binding TimerActive}"
                                        Value="False">
                                                <Setter Property="TextColor" Value="{DynamicResource Red}"/>
                                                <Setter Property="Text" Value="{StaticResource MaterialDesign_AvTimer}"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Label.Style>
                            </Label>
                            <Label 
                                Grid.Row="1"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Style="{StaticResource SmallLabelStyle}">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="{x:Static localization:Strings.Timer}"/>
                                            <Span Text=": "/>
                                            <Span>
                                                <Span.Style>
                                                    <Style TargetType="Span">
                                                        <Setter Property="Text" Value="{x:Static localization:Strings.On}"/>
                                                        <Style.Triggers>
                                                            <DataTrigger
                                                        TargetType="Span" 
                                                        Binding="{Binding TimerActive}"
                                                        Value="False">
                                                                <Setter Property="Text" Value="{x:Static localization:Strings.Off}"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Span.Style>
                                            </Span>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                        </Grid>
                    </buttons:SfButton>

                    <!-- WebSocket -->
                    <buttons:SfButton 
                        Style="{StaticResource IconButtonStyle}" 
                        Command="{Binding ReconnectWebSocketCommand}"
                        ShowIcon="False"
                        Grid.Column="1"
                        Margin="0"
                        >
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Label 
                                FontSize="{OnIdiom Phone=14, Tablet=16, Default=14}"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                >
                                <Label.Style>
                                    <Style TargetType="Label" BasedOn="{StaticResource MaterialFontFamilyIconLabelStyle}">
                                        <Setter Property="TextColor" Value="{DynamicResource Green}"/>
                                        <Setter Property="Text" Value="{StaticResource MaterialDesign_Web}"/>
                                        <Style.Triggers>
                                            <!-- Error -->
                                            <DataTrigger 
                                        TargetType="Label" 
                                        Binding="{Binding IsListeningToWebsocket}"
                                        Value="False">
                                                <Setter Property="TextColor" Value="{DynamicResource Red}"/>
                                                <Setter Property="Text" Value="{StaticResource MaterialDesign_Web}"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Label.Style>
                            </Label>
                            <Label 
                                Grid.Row="1"
                                VerticalTextAlignment="Center"
                                HorizontalTextAlignment="Center"
                                Style="{StaticResource SmallLabelStyle}">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="{x:Static localization:Strings.WebSocket}"/>
                                            <Span Text=": "/>
                                            <Span>
                                                <Span.Style>
                                                    <Style TargetType="Span">
                                                        <Setter Property="Text" Value="{x:Static localization:Strings.Connected}"/>
                                                        <Style.Triggers>
                                                            <DataTrigger
                                                        TargetType="Span" 
                                                        Binding="{Binding IsListeningToWebsocket}"
                                                        Value="False">
                                                                <Setter Property="Text" Value="{x:Static localization:Strings.Disconnected}"/>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Span.Style>
                                            </Span>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                        </Grid>
                    </buttons:SfButton>
                </Grid>
            </ContentView>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>

Once I click somewhere on the second half of the FlyoutFooterTemplate, the Flyout closes. This doesn't happen in the FlyoutHeaderTemplate though. Please see the screenshot below.

Steps to Reproduce

1. Add a FlyoutFooterTemplate to the AppShell and click on the second half

Expected Behavior

Flyout stays open

Actual Behavior

Flyout closes

Basic Information

• Version with issue: 5.0.0.1874
• Last known good version: not tested
• Platform Target Frameworks:
  • iOS: Tested with Iphone 11 (real device) and Iphone SE 2. Gen (Simulator)

Screenshots

[AndreasReitberger]

Just tested it on Android, here the Fylout stays open. However the content behind reacts on the touch inputs. So if a button is overlayed from the FlyoutFooterTemplate (from the currently shown page) the button is clickable through the FlyoutFooterTemplate.

[AndreasReitberger]

This seems to be fixed in the latest version as I can see so far.

[AndreasReitberger]

Hi, it seems that this issue is back in the latest version. Using the latest realease (SR 2) the flyout closes again, if I click on the FooterTemplate.