[SOLUTION] Close panel when clicking outside the box

Ask the community
, ,
1

So I made post on this Forum (https://www.wix.com/code/home/forum/community-discussion/close-panel-when-clicking-outside-the-box) where I asked how to make a box disappear when you click outside it. And I’m super excited to show you that I managed to do it!
So I used a pretty cool trick and I hope it’ll be helpful for you too!

Step 1: Add any Wix element that can be focused (has the “onFocus” event) to your panel/box, I used a text input.

Step 2: Change the settings of your element so the users can’t edit or see it. In my case where I used a text input I set the mandatory to false and the read only to true. Then I changed the design of it so you can’t see it.

Step 3: Add the following line of code to the function that shows the panel (adapt to your case):

export function panelbutton_click(event, $w) {
        $w("#panel").hide();
        $w("#input1").focus(); // <-- Add this line
}

Step 4: Add a global variable to your Site code (if the panel/box appears on all pages) like so:

let panelfocus = false; // must be outside any scope so it's Global

Step 5: Create an “onBlur” event for the element and make it so it’s like the following code (adapt to your case):

if (panelfocus === false) {
        $w("#panel").hide();
        $w("#input9").focus();
    }

Step 6: Add the “mouseIn” and “mouseOut” events to your panel/box and make it so it’s like the following code (adapt to your case):

export function panel_mouseIn(event, $w) {
    panelfocus = true;
}

export function panel_mouseOut(event, $w) {
    panelfocus = false;
}

Leave a comment if you have found something that is missing or if you need help ;D

4 Likes
2

Why is there #input1 in your code in Step 3?

3

Thanks @pptgames ! I looked everywhere on the web, and did not find any real solution, except this. I wouldn’t have solved this problem without the smooth trick of focus() and onBlur() functions you posted here.

To spread the happiness, I am posting here my version of the requirement and its solution (code as it is).

Requirement :-
To create a custom menu in the header (with buttons like “Home”, “About Us”, “Products”, “Services”, “Contact Us”).
If the “Products” button is clicked, then instead of a plain drop down list, a box showing the images of products appears.
And then if I click anywhere outside the box (including the “Products” button), the box disappears.

My adaptation of this solution :-
“Products” button is “#productsMenuButton”.
The box to be displayed is “#productsMenuBox”.
The helper element that supports the focus() / onBlur() functions is “#ghost”.

Global variables required.

let isFreshClick = true; // to differentiate if the button click is meant to show the products box or hide it.
let isOutsideProductsMenu = true;  // to determine if the mouse was clicked outside the products box.
let isOutsideProductsMenuButton = true;  // to determine if the mouse was clicked outside the products button.

The onClick() function that fires whenever the “Products” button is clicked.

export function productsMenuButton_onClick(event)
{
   if(isFreshClick)   // a fresh click is one where the box is already hidden before the click is made
   {
       $w('#productsMenuBox').show();
       $w('#ghost').focus();  // arm the onBlur() function.
       isFreshClick = false;   // the box will not appear again until a fresh click is made.
   }
   else
       isFreshClick = true;  // since the button lies outside the box and the click was not a fresh one, the onBlur() function hides the box. Now the next click on the button will be a fresh one.
}

The onBlur() function that allows hiding back the box as per the position where the mouse is clicked.

export function ghost_onBlur(event) 
{ 
   if(isOutsideProductsMenu)
   {
       $w('#productsMenuBox').hide();   // hide the box as the click was outside the box.
       if(isOutsideProductsMenuButton)
         isFreshClick = true;  // the next click can be fresh only when the click is outside the button.
   }
   else
       $w('#ghost').focus();  // rearm the onBlur() function to allow the box to be hidden when an appropriate click is made in the future.
}

These mouse() functions are fired automatically whenever mouse is moved in or out the box

export function productsMenuBox_mouseIn(event)
{
      isOutsideProductsMenu = false;
}

export function productsMenuBox_mouseOut(event)
{
      isOutsideProductsMenu = true;
}

These mouse() functions are fired automatically whenever mouse is moved in or out the button

export function productsMenuButton_mouseIn(event)
{
     isOutsideProductsMenuButton = false; 
}

export function productsMenuButton_mouseOut(event)
{
     isOutsideProductsMenuButton = true;
}