[BUG] Buttons or any view not firing inside Layout that has a TouchBehavior

[arahmancsd]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

The touch behavior in the parent view overrides the event on the nested view.

<VerticalStackLayout
    Padding="30,0"
    Spacing="25">
    <VerticalStackLayout.Behaviors>
        <mct:TouchBehavior PressedOpacity="0.5"/>
    </VerticalStackLayout.Behaviors>
    <Image
        Source="dotnet_bot.png"
        HeightRequest="185"
        Aspect="AspectFit"
        SemanticProperties.Description="dot net bot in a hovercraft number nine" />

    <Label
        Text="Hello, World!"
        Style="{StaticResource Headline}"
        SemanticProperties.HeadingLevel="Level1" />

    <Label
        Text="Welcome to &#10;.NET Multi-platform App UI"
        Style="{StaticResource SubHeadline}"
        SemanticProperties.HeadingLevel="Level2"
        SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

    <Button
        x:Name="CounterBtn"
        Text="Click me" 
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="OnCounterClicked"
        HorizontalOptions="Fill" />
</VerticalStackLayout>

Expected Behavior

Click on the button should work when a touch behavior is set on the parent view.

Steps To Reproduce

1. Download the repo and run it.
2. Click on the button doesn't work while it should work.

Link to public reproduction project repository

https://github.com/arahmancsd/MauiTouchBehavior.git

Environment

- .NET MAUI CommunityToolkit: 10.0.0
- OS: iOS, Android
- .NET MAUI: 9.0.21

Anything else?

A close issue #2385 shows it is resolved, but it isn't.

[bricefriha]

I reported the same issue (#2385), but it's meant to be fixed now after the .NET 9 support #2215.

Edit

I confirm the issue is still there on 10.0

[L3Prichaun13]

I am facing this exact same issue.
I have a border control with a long press command touch behavior and inside is a mct:Expander with a button in the Expander header. I have the button.clicked set to an event in the code behind which never fires

As of today's date, I have the latest communitytoolkit.Maui nuget package. Below is my xaml in case it helps paint the picture

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:LoanShark.ViewModels"
             xmlns:models="clr-namespace:LoanShark.Models"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:custom="clr-namespace:LoanShark.Behaviors"
             x:Class="LoanShark.Views.LoanPage"
             x:Name="Loans"
             x:DataType="vm:LoanViewModel"
             Title="Loans">

    <Grid>
        <!-- Main Content -->
        <!-- Show message when Loans is empty -->
        <Label Text="No loans found."
               IsVisible="{Binding Loans.Count, Converter={StaticResource IsZeroConverter}}"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        
        <!-- Loan List -->
        <CollectionView x:Name="loansCollectionView"
                        ItemsSource="{Binding Loans}"
                        VerticalOptions="FillAndExpand"
                        InputTransparent="False"
                        SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:Loan">
                    <Border x:Name="LoanBorder">
                        <Border.Behaviors>
                            <toolkit:TouchBehavior BindingContext="{Binding Path=BindingContext, Source={x:Reference LoanBorder}, x:DataType=Border}" 
                                                   LongPressCommand="{Binding Source={x:Reference Loans}, Path=BindingContext.ShowContextMenuCommand, x:DataType=ContentPage}"
                                                   LongPressCommandParameter="{Binding .}"/>
                        </Border.Behaviors>
                        <VerticalStackLayout>
                            <!-- Default View -->
                            <Label Text="{Binding Borrower.FullName}"
                           Style="{DynamicResource SubHeaderLabelStyle}"
                           FontSize="16" />

                            <!-- Collapsible Details -->
                            <toolkit:Expander ExpandedChanged="OnExpandButtonClicked">
                                <toolkit:Expander.Header>
                                    <Grid ColumnDefinitions="*, Auto" VerticalOptions="CenterAndExpand">
                                        <Label Text="{Binding Name}"
                                       Style="{DynamicResource RegularLabelStyle}"
                                       FontSize="14"
                                       Grid.Column="0" />

                                        <Button Text="+"
                                        FontSize="14"
                                        TextColor="White"
                                        WidthRequest="20"
                                        HeightRequest="20"
                                        MinimumWidthRequest="20"
                                        MinimumHeightRequest="20"
                                        CornerRadius="20"
                                        Padding="0"
                                        HorizontalOptions="End"
                                        Grid.Column="1"
                                        Clicked="OnExpandButtonClicked" />
                                    </Grid>
                                </toolkit:Expander.Header>

                                <toolkit:Expander.Content>
                                    <Grid RowDefinitions="Auto, Auto, Auto, Auto" ColumnDefinitions="*, Auto">
                                        <!-- Original Loan Amount -->
                                        <Label Text="Original:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="0" Grid.Column="0" />
                                        <Label Text="{Binding OriginalLoanAmount, StringFormat='{0:C}'}"
                                       Style="{DynamicResource RegularLabelStyle}" Grid.Row="0" Grid.Column="1" HorizontalOptions="End" />

                                        <!-- Remaining Loan Amount -->
                                        <Label Text="Remaining:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="1" Grid.Column="0" />
                                        <Label Text="{Binding RemainingLoanAmount, StringFormat='{0:C}'}"
                                       Style="{DynamicResource RegularLabelStyle}" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" />

                                        <!-- Interest Rate -->
                                        <Label Text="Interest Rate:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="2" Grid.Column="0" />
                                        <Label Text="{Binding Interest, StringFormat='{0:P}'}"
                                       Style="{DynamicResource RegularLabelStyle}" Grid.Row="2" Grid.Column="1" HorizontalOptions="End" />

                                        <!-- Loan End Date -->
                                        <Label Text="End Date:" Style="{DynamicResource SubHeaderLabelStyle}" Grid.Row="3" Grid.Column="0" />
                                        <Label Text="{Binding LoanEndDate, StringFormat='{0:MM/dd/yyyy}'}"
                                       Style="{DynamicResource RegularLabelStyle}" Grid.Row="3" Grid.Column="1" HorizontalOptions="End" />
                                    </Grid>
                                </toolkit:Expander.Content>
                            </toolkit:Expander>
                        </VerticalStackLayout>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- Floating Add Button -->
        <Button Text="+" 
                Command="{Binding NavigateToNewLoanCommand}"
                HorizontalOptions="End"
                VerticalOptions="End"
                Style="{DynamicResource FloatingActionButtonStyle}" />
    </Grid>
</ContentPage>

[bradencohen]

I encountered a similar situation where I needed to manage nested touch behaviors. For example:

In my case, I wanted to tap on the box to focus it while still allowing the dropdown to be used for selecting options.

Initially, I applied touch behaviors to both the parent and child elements, as you might expect. However, I found that the parent’s touch behavior interfered with the child’s. To resolve this, I implemented a workaround where the parent’s touch behavior is temporarily disabled whenever the child’s touch behavior is triggered:

private void PickerTouchBehavior_CurrentTouchStatusChanged( object sender, CommunityToolkit.Maui.Core.TouchStatusChangedEventArgs e )
{
    if ( e.Status == CommunityToolkit.Maui.Core.TouchStatus.Started )
    {
        _primaryTouchBehavior.IsEnabled = false;
    }
    else
    {
        _primaryTouchBehavior.IsEnabled = true;
    }
}

While your setup might differ, this approach could still be applicable and help ensure smooth interactions in nested touch scenarios.