Tap elsewhere to close panel

How-to Discussions
1

Hello.

I have a pop-up panel that I want to be able to close by tapping anything that’s not the panel itself.

Is there a direct function for this? If not, what do you reckon is the best practice for this?

Thank you in advance.

2

There is no direction function for that, and the best practice is to put something in the background. That something can be fully transparent (use HitTestMode) if you like:

<App>
    <JavaScript>
    module.exports = {
        outside: function() {
            console.log("outside clicked");
        },
        inside: function() {
            console.log("inside clicked");
        }
    };
    </JavaScript>
    <Panel>
        <Panel Margin="64" Clicked="{inside}">
            <Rectangle Color="#18f" CornerRadius="8" />
        </Panel>
        <Panel HitTestMode="LocalBounds" Clicked="{outside}" />
    </Panel>
</App>
3

Ok.

The popup lies on top of a darker semi-transparent panel that covers the screen and with the layer set to Background. Could I just add a Clicked action on that one, or won’t that work since it’s set to Background?

4

Give it a go and see if it works :slight_smile: If it doesn’t post a complete, minimal repro - similar to what I posted above.

5

It worked :slight_smile: Thanks for the help!

<Panel Layer="Overlay">
	<StackPanel ItemSpacing="5" Alignment="Center" ContentAlignment="Center" Padding="20,30,20,20" Margin="10" Width="100%">
		<TextInput TextAlignment="Center" FontSize="16" Value="{singleLineEditValue}"/>
		<Rectangle Height="2" Fill="#E1E1E1" Margin="0,0,0,5"/>
		<hangout.Button ButtonColor="Button.Green" Text="Save" Clicked="{saveInput}"/>

		<Rectangle Color="#fff" CornerRadius="5" Layer="Background">
			<Shadow Size="2" Distance="2" Color="#0004" />
		</Rectangle>
	</StackPanel>
	<Panel Layer="Background" HitTestMode="LocalBounds" Clicked="{closeSingleLineValuePanel}">
		<Rectangle Color="#0004" />
	</Panel>
</Panel>