[BUG] PopupV2 CanBeDismissedByTappingOutsideOfPopup=true still dismisses the popup if tap INSIDE the popup

[MichaelShapiro]

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

A PopupV2 created with option CanBeDismissedByTappingOutsideOfPopup = true can be dismissed by tapping inside the popup.

Expected Behavior

I would assume, judging by the name of CanBeDismissedByTappingOutsideOfPopup option, that it means that tapping outside of popup will close the popup, but shouldn't close the popup when tapping inside.

Steps To Reproduce

Follow the repository link, run the project "PopupV2Bugs", tap the button "PopupV2 dismiss bug"

---

Here is the button that opens the popup:

        private async void OnClicked_DismissBug(object? sender, EventArgs e)
        {
            await this.ShowPopupAsync(
                view: new PopupV2_Dismiss(),
                options: new PopupOptions
                {
                    CanBeDismissedByTappingOutsideOfPopup = true,
                    PageOverlayColor = Colors.Black.WithAlpha(0.5f)
                }
                );
        }

Here is the actual popup - it has just a simple label

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupV2_MultipleBugs.PopupV2_Dismiss">
    <VerticalStackLayout>
        <Label 
            Text="This popup is instantiated with CanBeDismissedByTappingOutsideOfPopup = true. 
            But if you tap INSIDE this popup - popup still gets dismissed."
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentView>

PopupV2_DismissBug.mp4

Link to public reproduction project repository

https://github.com/MichaelShapiro/MauiBugs/tree/ad48ce23ab1548c10e90b55ccdef65264a9f2ab7/PopupV2_CV2_Selection

Environment

----------------------
OS: Windows 10
Visual Studio 2022 v 17.14.5

----------------------
nugets installed:
<PackageReference Include="CommunityToolkit.Maui" Version="12.0.0" />
<PackageReference Include="Microsoft.Maui.Controls" Version="9.0.70" />

----------------------
dotnet --list-sdks

9.0.301 [C:\Program Files\dotnet\sdk]


--------------------
dotnet workload list

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
android                    35.0.61/9.0.100        VS 17.14.36203.30
ios                        18.4.9288/9.0.100      VS 17.14.36203.30
maccatalyst                18.4.9288/9.0.100      VS 17.14.36203.30
maui-windows               9.0.51/9.0.100         VS 17.14.36203.30

Anything else?

I suspect that because label is not an active element, not an elements that can natively capture tap gestures, it somehow plays a (negative) role in this situation. But still - there is an inside and outside of popup regardless of what that "inside" hosts and I believe it shouldn't dismiss the popup when tapping inside it. Unless it's by design - but then, perhaps the documentation can reflect it, please?

[bijington]

This is certainly not be design and sounds like a bug to me!

[MichaelShapiro]

@bijington Thank you for confirming - I was going a bit crazy here trying to understand :) But after I summitted this bug I quickly found a temporary work-around. Just add an empty gesture recognizer to an element inside the popup and it won't dismiss the popup on tapping inside. Not the ideal solution, but good enough while it's being worked on. Thank you!

        <Label 
            Text="This popup is instantiated with CanBeDismissedByTappingOutsideOfPopup = true. 
            But if you tap INSIDE this popup - popup still gets dismissed."
            VerticalOptions="Center" 
            HorizontalOptions="Center">

            <!--
            This is a work-around for the dismiss-on-inside-tap bug
            Declaring and empty gesture recognizer will capture user input INSIDE the popup

            <Label.GestureRecognizers>
                <TapGestureRecognizer/>
            </Label.GestureRecognizers>
            -->
            
        </Label>

[bijington]

I can reproduce the issue but not sure how to solve it right now. Good work on finding a workaround already!

[bijington]

I believe this PR #2741 should fix it

[PauchardThomas]

@bijington Thank you for confirming - I was going a bit crazy here trying to understand :) But after I summitted this bug I quickly found a temporary work-around. Just add an empty gesture recognizer to an element inside the popup and it won't dismiss the popup on tapping inside. Not the ideal solution, but good enough while it's being worked on. Thank you!

        <Label 
            Text="This popup is instantiated with CanBeDismissedByTappingOutsideOfPopup = true. 
            But if you tap INSIDE this popup - popup still gets dismissed."
            VerticalOptions="Center" 
            HorizontalOptions="Center">

            <!--
            This is a work-around for the dismiss-on-inside-tap bug
            Declaring and empty gesture recognizer will capture user input INSIDE the popup

            <Label.GestureRecognizers>
                <TapGestureRecognizer/>
            </Label.GestureRecognizers>
            -->
            
        </Label>

Not working for me

[Quaybe]

Thank you for posting the issue and the workaround. Interestingly, for my Android app, it would not dismiss when tapping inside the popup, as is expected. On my Windows app, however, it would dismiss the popup when clicking inside the popup. Pretty silly! Your workaround has saved me some sanity, so thank you.

[MichaelShapiro]

@Quaybe glad it helped you.