# Detecting a click outside an element

**URL:** <https://community.weweb.io/t/detecting-a-click-outside-an-element/3804>\
**Category:** How do I?\
**Created:** [August 7, 2023, 8:40pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804 "2023-08-07T20:40:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![MatthewS](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthews/32/3582_2.png) [@MatthewS](https://community.weweb.io/u/MatthewS)\
**Post date:** [August 7, 2023, 8:40pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/1 "2023-08-07T20:40:34Z")

</div>

Hi 👋,

I am creating a filter selector like so:  
 ![ezgif.com-video-to-gif](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4027891a41ad4ce64391d921cae9bef9de56dd85.gif)

I created this using the hover dropdown element, but I’ve ran into a blocker.  
I am trying to close the dropdown when the ‘save’ button is pressed, but the element only allows for closing the element on any click or only clicks outside of the element - so not a specific click inside the element.

Is there any way I can manually detect a click outside of the hover dropdown (or any element)?  
I could then use this in a manual workflow to bind the display.

Also, do I need to do something specific for the hover dropdown display animations to work?  
It seems just to be displaying instantly with no animation, regardless of the animation or duration I set.

Thanks! 🙂

---

<div class="post-metadata">

**Author:** ![MatthewS](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthews/32/3582_2.png) [@MatthewS](https://community.weweb.io/u/MatthewS)\
**Post date:** [August 7, 2023, 9:44pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/2 "2023-08-07T21:44:23Z")

</div>

After looking through the Github of the element, I noticed the function handleClickOutside(), but I’m not sure how/if I could call this from the browser?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3c6b4f396c25432b687b6ef8fbe5df69c64e4697.png)

---

<div class="post-metadata">

**Author:** ![chadsmithclt](https://avatars.discourse-cdn.com/v4/letter/c/8797f3/32.png) [@chadsmithclt](https://community.weweb.io/u/chadsmithclt)\
**Post date:** [August 7, 2023, 10:27pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/3 "2023-08-07T22:27:49Z")

</div>

If you arent tied to using hover, On Click will help you accomplish that. If On Hover is a requirement though, someone else may have a better approach.

---

<div class="post-metadata">

**Author:** ![MatthewS](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthews/32/3582_2.png) [@MatthewS](https://community.weweb.io/u/MatthewS)\
**Post date:** [August 8, 2023, 7:34am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/4 "2023-08-08T07:34:44Z")

</div>

I’ll need to bind the display of the element if I use On Click.  
At the moment I’m using the element’s native functionality for hiding/displaying.

Once I bind the display, I’ll need some way to correctly hide the element if someone clicks outside it. That’s my crux at the moment.

---

<div class="post-metadata">

**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\
**Post date:** [August 8, 2023, 10:33am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/5 "2023-08-08T10:33:11Z")

</div>

You could add a bit of javascript that binds the blur event to toggle the variable that controls your element. So assuming you give it an ID of “myelement,” and display is bound to a variable called “show\_myelement” you could set up an action (running on, say, page load) with the javascript:

```auto
wwLib.getFrontDocument().querySelector('#myelement').addEventListener('blur', function(event) {
  wwLib.wwVariable.updateVariable('show_myelement', false); 
})

```

This kind of “bring a little code” is what makes lowcode so powerful!

---

<div class="post-metadata">

**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\
**Post date:** [August 8, 2023, 10:47am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/6 "2023-08-08T10:47:49Z")

</div>

I do this in my app:

Add a div where I want the drop-down  
Add the trigger, popup, and another div I call backdrop

Set your trigger to look how it should,

Set your drop-down to a fixed position and use translate to move it where it needs to be. Set the z-index to 100

Set your backdrop to z-index 99x set position to fixed. Set the left right top and bottom values to 0 pix. Just to be safe, set the height and width to 100%

Use a variable to show the drop-down. Bind the drop-down and backdrop to that variable so they both show at the same time.

Now you can use the backdrop to “listen” for the click event _off_ of the drop-down.

---

<div class="post-metadata">

**Author:** ![MatthewS](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/matthews/32/3582_2.png) [@MatthewS](https://community.weweb.io/u/MatthewS)\
**Post date:** [August 8, 2023, 4:26pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/7 "2023-08-08T16:26:10Z")

</div>

Amazing!

Thanks guys @raydeck @jaredgibb

---

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [September 8, 2023, 12:56am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/8 "2023-09-08T00:56:20Z")

</div>

Does this work with a container? I’ve set this JS code as a workflow action to run on page load. But when I try to click outside of the container, it is still being shown.

The code I’m using:

```auto
wwLib.getFrontDocument().querySelector('#selector-container').addEventListener('blur', function(event) {
  wwLib.wwVariable.updateVariable('showSearchableDropdown', false); 
})

```

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 30, 2023, 10:39am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/9 "2023-09-30T10:39:10Z")

</div>

If anyone else happens to stumble on this, I solved it with this code.

```javascript
wwLib.getFrontWindow().addEventListener('click', function(e){   

  if (!wwLib.getFrontDocument().getElementById('your-element').contains(e.target)){
  // If your element (with an id #your-element) doesn't contain the click event's target (e.target) execute this

  variables['a43f9f7f-3248-4ab4-995f-47018ce388fe'] = false
  // [your_visibility_variable] = false

  } 
});

```

---

<div class="post-metadata">

**Author:** ![maciej.ziolkowski](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/maciej.ziolkowski/32/7740_2.png) [@maciej.ziolkowski](https://community.weweb.io/u/maciej.ziolkowski)\
**Post date:** [March 7, 2024, 5:26am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/11 "2024-03-07T05:26:07Z")

</div>

Hi,  
I’ve tried both code snippets suggested in this thread and none of them works. I have a component that contains an element that is revealed on `click` event. I hide it by using `conditional rendering` where the rendering is binded to global boolean variable `tooltipVisibility`. Now, I am able to show an element (it is triggered by clicking another element within that component, that switches the boolean to `true`). But when it comes to hiding it by clicking outside the element, above code snippet suggested by @raelyn throws such error:

```auto
name: "TypeError"

stack: "TypeError: Cannot read properties of null (reading 'addEventListener') at eval (eval at executeCode (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:370508), :1:84) at eval (eval at executeCode (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:370508), :4:3) at executeCode (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:370508) at we (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:444020) at me (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:442395) at pe (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:440924) at https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:458574 at Array.map () at ge (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:458566) at _e (https://editor-cdn.weweb.io/ww_front/public/js/index.697ae9af.js:1:461420)"

message: "Cannot read properties of null (reading 'addEventListener')"

```

and a code snippet suggested by @Broberto seems to have some effect, because I see this message in the log:

`Setting value for tooltipVisibility`

but nothing happens. As a matter of fact, when the code snippet is activated I am neither able to show nor hide the tooltip…

---

<div class="post-metadata">

**Author:** ![andreas](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/andreas/32/7349_2.png) [@andreas](https://community.weweb.io/u/andreas)\
**Post date:** [March 7, 2024, 9:53am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/12 "2024-03-07T09:53:48Z")

</div>

Not 100% sure, if I understand you correctly, but I think it’s because you use conditional rendering for hiding. This way, the element is completely removed from the page, which ends up being `null`. So try showing/hiding your element by binding `tooltipVisibility` to the `display` property. Does that help?

---

<div class="post-metadata">

**Author:** ![andreas](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/andreas/32/7349_2.png) [@andreas](https://community.weweb.io/u/andreas)\
**Post date:** [March 7, 2024, 9:57am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/13 "2024-03-07T09:57:15Z")

</div>

> [@MatthewS](#):
>
> Also, do I need to do something specific for the hover dropdown display animations to work?  
> It seems just to be displaying instantly with no animation, regardless of the animation or duration I set.

This is still the case. Changing animation settings don’t have any effect. I guess that’s a job for @aurelie?

---

<div class="post-metadata">

**Author:** ![maciej.ziolkowski](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/maciej.ziolkowski/32/7740_2.png) [@maciej.ziolkowski](https://community.weweb.io/u/maciej.ziolkowski)\
**Post date:** [March 7, 2024, 10:02pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/14 "2024-03-07T22:02:32Z")

</div>

> [@Broberto](#):
>
> ```auto
> wwLib.getFrontWindow().addEventListener('click', function(e){   
> 
> if (!wwLib.getFrontDocument().getElementById('your-element').contains(e.target)){
> // If your element (with an id #your-element) doesn't contain the click event's target (e.target) execute this
> 
> variables['a43f9f7f-3248-4ab4-995f-47018ce388fe'] = false
> // [your_visibility_variable] = false
> 
> } 
> })
> 
> ```

Hi @andreas, thanks for the suggestion, but it turned out that @Broberto 's solution worked, but I had to reassign the required `element ID` to some other element (to an outer wrapper that contained a tooltip as well as element revealing the tooltip on click). Now everything works.

---

<div class="post-metadata">

**Author:** ![andreas](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/andreas/32/7349_2.png) [@andreas](https://community.weweb.io/u/andreas)\
**Post date:** [March 8, 2024, 5:51am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/15 "2024-03-08T05:51:15Z")

</div>

Great. Glad you solved this.

---

<div class="post-metadata">

**Author:** ![Dom](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Dom](https://community.weweb.io/u/Dom)\
**Post date:** [March 18, 2024, 3:18am UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/16 "2024-03-18T03:18:21Z")

</div>

@maciej.ziolkowski and everyone else thanks for this code snippet / discussion, it’s very useful and it worked when testing for me. However, I have a slight variation of the use-case which I can’t figure out.

Per the screenshot, the items (Start. Welcome, Onboarding) are in a dynamic and nested collection list.

At each item level, the three horizontal dots open the menu (add and delete flow) when one of the items is clicked, the menu is removed. This is working fine, I’m changing “menu\_visible”: true/false in the collection list.

As per the discussion, the problem I have is when you click outside of the menu, it doesn’t close and if you click on the three dots against another item you end up with a mess.

I tried @maciej.ziolkowski code and it works but I end up with a different problem. The event handler sets “menu\_visible”: false but because the event handler now persists, subsequent clicks on the three dots no longer work as each click negates “menu\_visible”: true.

What I’m thinking is the event handler to only persist whilst the menu is visible, then it should be removed until it’s created next time.

Any ideas how to do this?

Ideally there would be a On Blur event for divs, similar to text fields, which would solve this.

BTW, I was originally using the Dropdown element but this has it’s own display issues, when it’s used in a collection list, the menu displays under the trigger button of other items in the list. I prefer the more “manual” approach anyway.

 ![Screenshot 2024-03-18 140500](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c1645cb89dd4913868c5b9fe426d5b7e32da4dfc.png)

---

<div class="post-metadata">

**Author:** ![maciej.ziolkowski](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/maciej.ziolkowski/32/7740_2.png) [@maciej.ziolkowski](https://community.weweb.io/u/maciej.ziolkowski)\
**Post date:** [March 28, 2024, 1:13pm UTC](https://community.weweb.io/t/detecting-a-click-outside-an-element/3804/17 "2024-03-28T13:13:37Z")

</div>

Hi @Dom. Unfortunately I am unable to help you. I am new to the low-code game 🙂 and still have a lot to learn.