# Tap elsewhere to close panel

**URL:** <https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278>\
**Category:** How-to Discussions\
**Created:** [August 31, 2017, 9:35am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278 "2017-08-31T09:35:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ferdinand.berthelsen](https://avatars.discourse-cdn.com/v4/letter/f/57b2e6/32.png) [@ferdinand.berthelsen](https://forums.fusetools.com/u/ferdinand.berthelsen)\
**Post date:** [August 31, 2017, 9:35am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278/1 "2017-08-31T09:35:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 31, 2017, 9:42am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278/2 "2017-08-31T09:42:04Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![ferdinand.berthelsen](https://avatars.discourse-cdn.com/v4/letter/f/57b2e6/32.png) [@ferdinand.berthelsen](https://forums.fusetools.com/u/ferdinand.berthelsen)\
**Post date:** [August 31, 2017, 9:45am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278/3 "2017-08-31T09:45:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 31, 2017, 9:51am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278/4 "2017-08-31T09:51:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ferdinand.berthelsen](https://avatars.discourse-cdn.com/v4/letter/f/57b2e6/32.png) [@ferdinand.berthelsen](https://forums.fusetools.com/u/ferdinand.berthelsen)\
**Post date:** [August 31, 2017, 9:55am UTC](https://forums.fusetools.com/t/tap-elsewhere-to-close-panel/4278/5 "2017-08-31T09:55:48Z")

</div>

It worked 🙂 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>
```