litelement - handling click away event

Question

I'm building a site navigation using litelement. It will have a dropdown menu. I am trying to figure out how to add an event so that if a user clicks anywhere outside the dropdown menu itself or even outside of the custom element, the dropdown menu will close. I think that's the natural expectation.

I thought of adding a property to my custom element that can be used as a "state". And then added an event listener to the document through connectedCallback lifecycle method. But, it seems I can't really access the property as I had expected. The property is accessible through any other elements that has an event attached to it.

Below is a very generic codepen. Clicking on anywhere on the document should open up a popup that shows the value of the property is undefined. However, if I click on the button that's inside the custom element, which has an event attached to it, that event handler is able to access the property successfully.

https://codepen.io/aver-mimas/pen/ExjZXMq

What's going wrong in this example?

Answer 1

I'm building a site navigation using litelement. It will have a dropdown menu. I am trying to figure out how to add an event so that if a user clicks anywhere outside the dropdown menu itself or even outside of the custom element, the dropdown menu will close. I think that's the natural expectation.

I thought of adding a property to my custom element that can be used as a "state". And then added an event listener to the document through connectedCallback lifecycle method. But, it seems I can't really access the property as I had expected. The property is accessible through any other elements that has an event attached to it.

Below is a very generic codepen. Clicking on anywhere on the document should open up a popup that shows the value of the property is undefined. However, if I click on the button that's inside the custom element, which has an event attached to it, that event handler is able to access the property successfully.

https://codepen.io/aver-mimas/pen/ExjZXMq

What's going wrong in this example?

Answer 2

Although wrapping the click handler in an anonymous function works fine when adding the event listener, removing it, which you should generally do, won't work. The reason is that although the two anonymous functions look identical, they have completely different references.

document.addEventListener('click', e => this.handleDocumentClick());
document.removeEventListener('click', e => this.handleDocumentClick()); // ❌ doesn't work

For this reason, in such cases you should use an arrow function inside your class, as stated in the docs :

const handleDocumentClick = () => {
  // handle click event
};

// ..

document.addEventListener('click', this.handleDocumentClick);
document.removeEventListener('click', this.handleDocumentClick); // ✅ works