The DOM Way To Detect Outside Click

The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children’s direct children, and so on.

<section>
  <div class="click-text">
    click inside and outside me
  </div>
</section>

const concernedElement = document.querySelector(".click-text");

document.addEventListener("mousedown", (event) => {
  if (concernedElement.contains(event.target)) {
    console.log("Clicked Inside");
  } else {
    console.log("Clicked Outside / Elsewhere");
  }
});

1. Selected the HTML element with the class click-text.
2. Put a mouse down event listener on document and set an event handler callback function.
3. In the callback function, we are checking if our concerned element — for which we have to detect outside click — contains the element (including itself) which triggered the mousedown event (event.target).

Wrapping DOM Hierarchy Based Detection Logic In A React Component

<OutsideClickHandler
  onOutsideClick={() => {
    console.log("I am called whenever click happens outside of 'AnyOtherReactComponent' component")
  }}
>
  <AnyOtherReactComponent />
</OutsideClickHandler>

1. children
   It could be any valid React children. In the example above we are passing AnyOtherReactComponent component as OutsideClickHandler’s child.
2. onOutsideClick
   This function will be called if a click happens anywhere outside of AnyOtherReactComponent component.

import React from 'react';

class OutsideClickHandler extends React.Component {
  render() {
    return this.props.children;
  }
}

import React, { createRef } from 'react';

class OutsideClickHandler extends React.Component {
  wrapperRef = createRef();

  render() {    
    return (
      <div ref={this.wrapperRef}>
        {this.props.children}
      </div>
    )
  }  
}

class OutsideClickHandler extends React.Component {
  componentDidMount() {
    document
      .addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount(){
    document
      .removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    // Here, we'll write the same outside click
    // detection logic as we used before.
  }
}

class OutsideClickHandler extends React.Component {
  componentDidMount() {
    document
      .addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount(){
    document
      .removeEventListener('mousedown', this.handleClickOutside);
  }

  handleClickOutside = (event) => {
    if (
      this.wrapperRef.current &&
      !this.wrapperRef.current.contains(event.target)
    ) {
      this.props.onOutsideClick();
    }
  }
}

If the DOM node that was clicked (event.target) was neither our container div (this.wrapperRef.current) nor was it any node inside of it (!this.wrapperRef.current.contains(event.target)), we call the onOutsideClick prop.

The Problem With DOM Hierarchy Based Outside Click Detection Logic

“Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.”

— React docs for portals

Using Class Instance Property And Event Delegation To Detect Outside Click

1. To not rely on DOM structure.
2. To store the ‘clicked’ state somewhere in the JavaScript code.

1. A class instance property, if you are using a class react component.
2. A ref, if you are using a functional React component.

1. clickCaptured will be true, if children where clicked.
2. clickCaptured will be false, if anywhere outside of them was clicked.

1. If clickCaptured is true, we fire an outside click handler that the user of OutsideClickHandler might have given us through a prop.
2. We reset clickCaptured to false, so that we are ready for another click detection.

import React from 'react'

class OutsideClickHandler extends React.Component {
  clickCaptured = false;

  render() {
    if ( typeof this.props.children === 'function' ) {
      return this.props.children(this.getProps())
    }

    return this.renderComponent()
  }
}

1. set initial value of clickCaptured instance property to false.
2. In the render method, we check if children prop is a function. If it is, we call it and pass it all the props we want to give it by calling getProps class method. We haven’t implemented getProps just yet.
3. If the children prop is not a function, we call renderComponent method. Let’s implement this method now.

class OutsideClickHandler extends React.Component {
  renderComponent() {
    return React.createElement(
      this.props.component || 'span',
      this.getProps(),
      this.props.children
    )
  }
}

class OutsideClickHandler extends React.Component {
  getProps() {
    return {
      onMouseDown: this.innerClick,
      onTouchStart: this.innerClick
    };
  }
}

class OutsideClickHandler extends React.Component {
  innerClick = () => {
    this.clickCaptured = true;
  }
}

class OutsideClickHandler extends React.Component {
  componentDidMount(){
    document.addEventListener('mousedown', this.documentClick);
    document.addEventListener('touchstart', this.documentClick);
  }

  componentWillUnmount(){
    document.removeEventListener('mousedown', this.documentClick);
    document.removeEventListener('touchstart', this.documentClick);
  }

  documentClick = (event) => {
    if (!this.clickCaptured && this.props.onClickOutside) {
      this.props.onClickOutside(event);
    }
    this.clickCaptured = false;
  };
}

1. clickCaptured would only be true if children of our React component would have been clicked.
2. If anything else would have been clicked clickCaptured would be false, and we’d know that outside click has happened.

Outside Focus Detection

class OutsideClickHandler extends React.Component {
  focusCaptured = false // 1. to add this

  innerFocus = () => {
    this.focusCaptured = true;
  }

componentDidMount(){
    document.addEventListener('mousedown', this.documentClick);
    document.addEventListener('touchstart', this.documentClick);
    document.addEventListener('focusin', this.documentFocus);
  }

componentWillUnmount(){
    document.removeEventListener('mousedown', this.documentClick);
    document.removeEventListener('touchstart', this.documentClick);
    document.removeEventListener('focusin', this.documentFocus);
  }

documentFocus = (event) => {
    if (!this.focusCaptured && this.props.onFocusOutside) {
      this.props.onFocusOutside(event);
    }
    this.focusCaptured = false;
  };

// 2.  to indent the following piece of code
// 3. This piece of code doesn’t get copied on clipboard on clicking the ‘copy’ button

getProps() { return { onMouseDown: this.innerClick, onTouchStart: this.innerClick, onFocus: this.innerFocus }; }

document.addEventListener('focus', this.documentFocus, true);

Conclusion

Related Resources

1. React Foco Github Repository
2. mdn documentation for Node.contains DOM api
3. React docs for portals
4. React createElement API
5. React Github codebase Pull Request for mapping onFocus and onBlur methods to internally use focusin and focusout native events.
6. Delegating Focus and Blur events