Handle click outside element in LWC

Question

I am looking to create a custom lookup component using Lightning Web Components. I want to be able to detect when the user is clicking outside of the element so that I can close the dialog and/or clear the text if nothing is selected. I can't seem to use standard Javascript since template.contains(e.target) and DOM traversal doesn't seem to detect whether the clicked element is inside of the component or not. Here is a sample of what I have attempted.

1. DOM traversal

let parent = this.template.querySelector('.slds-form-element__row');//parent element
let targetElement = e.target; // clicked element

do {
  if (targetElement == parent) {
    window.console.log('clicked inside');
    return;
  }
  // Go up the DOM
  targetElement = targetElement.parentNode;
} while (targetElement);

window.console.log('clicked outside');

2. template.contains(e.target)

if (this.template.querySelector('.slds-form-element__row').contains(e.target)) {
  window.console.log('clicked inside');
} else {
  window.console.log('clicked outside');
}

In both of these cases, clicked outside is the only thing I will see since e.target doesn't seem to exist within the DOM element, but I do know my click event (which I've attached to document) is firing since I do see the console.log statement in my developer console.

Answer 1

You can't navigate outside your own template. That's one of the security features of LWC's shadow DOM. Instead, create a transparent, fixed div that covers the entire screen area, then react to that, instead:

<template>
  <div class="backdrop" onclick={closeModal}></div>
  <div class="content">... your content here ...</div>
</template>

---

.backdrop {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  z-index: 1000;
  /* anything else you need here */
}

For a complete example, look at Lightning Strike's Lookup component (written in Aura, but still applicable).

Answer 2

Although I wasn't able to solve my above problem exactly as I posted it, I was able to solve it with a different approach.

I believe the issue I was having was locker service related. This is just a theory, but I believe since e.target in my scenario is a proxy, it can't be used to compare against other nodes within my DOM, even if they are within the same component.

I was able to work around this issue by restructuring my code a little bit so that I am not relying on DOM node comparison. Here is an example of the final code.

onNodeClick = () => {
  this._isOpen = true;

  //Timeout is to prevent the click from continuing and closing the element right away.
  //Just this slight delay of 0 is enough to stop propagation
  window.setTimeout(() => window.addEventListener('click', this.handleClose), 0);
}

handleClose = () => {
  this._isOpen = false;
  window.removeEventListener('click', this.handleClose);
}

Answer 3

Another tweak I found it working shown below. "onmouseleve" gets called when mouse is taken out of the component where it's mentioned.

 <div onmouseleave={function}> 
    <Your content here>

 </div>