How do I close a ui panel when a tap occurs outside of the panel area?

Questions & Answers
1

I’ve checked the “MaskableGraphic” input callbacks, nothing is being triggered. I’d like to have a panel be closed when the user taps/clicks outside of the panel area.

I understand that a “ui panel” is not a “real” object in 4.6, but the idea is that I have a window type that is compromised of images/game objects/etc.

2

Alright, I’ve come up with a solution for you :slight_smile:

Been messing with the UI Panels.
Alright, within your UI Panel, what you want to do, is click Add Component>Event Trigger.
Add a Deselect Method.
While in Deselect>All>UI Panel Game Object (whatever you have named your Panel), from the drop down menu click GameObject>Set Active(bool)>Toggle Box Deselected. (Okay, first have to click the panel itself before you click outside the panel for it to deactivate itself. Hope this works for you mann.

3

Why not just disable the panel as a game object - that is how I’ve been managing them and it works great so far. I was here looking for an answer to another question but thought I’d mention this is working for me.

4

Here is my panel script:

public class PanelMaskScript : MonoBehaviour ,IPointerDownHandler
{
public void OnPointerDown(PointerEventData eventData)
{
this.gameObject.SetActive(false);
}

}

5

I found this page and read through the all the answers, and will condense the answer here.

Solution:

Turn off a panel when clicking away from it

(This works with panels that have clickable buttons on it. If you have no buttons within the panel, you can do this a simpler way.)

1 On the panel that needs to turn off when you tap away from it, add a component called ‘Event Trigger’. Choose ‘Add New Event Type’. Choose ‘Deselect.’ This tell Unity to run a function if you click outside of the element. Next, we make the function that will run.

2 The function to turn off the panel will run in the next frame. You don’t want it to turn off the panel during this frame, because the clickable buttons within the panel won’t run if it’s already off. Example function:

public void turnOffNextFrame(GameObject thisObj)
    {
        StartCoroutine(turnOffNextFrame_Method(thisObj));
    }
    IEnumerator turnOffNextFrame_Method(GameObject thisObj)
    {
        yield return new WaitForSeconds(.01f);
        thisObj.SetActive(false);
    }

This function needs to be chosen on the ‘Event Trigger’ under ‘Deselect’. Then, you can drag the panel to turn off onto the opening that you get in the ‘Deselect’ area.

3 In order for Unity Events to consider the panel ‘Deselected’ when you click away from it, it has to be considered selected first. And the end user may never click on the panel before clicking away. So, you can automatically select the panel when it becomes active with this script:

public class UIElementSelected : $$anonymous$$onoBehaviour
 {
     EventSystem eventSystem;
 
     private void Awake()
     {
         eventSystem = FindObjectOfType<EventSystem>();
     }
 
     private void OnEnable()
     {
         eventSystem.SetSelectedGameObject(this.gameObject);
     }
 }

Place this script on the panel that will be turned off.