Skip to content
Ctrl+K

Click away listener

Detect if a click event happened outside of an element. It listens for clicks that occur somewhere in the document.

Example

For instance, if you need to hide a menu dropdown when people click anywhere else on your page:

<ClickAwayListener onClickAway={handleClickAway}>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>

Notice that the component only accepts one child element. You can find a more advanced demo on the Menu documentation section.

Portal

The following demo uses Portal to render the dropdown into a new "subtree" outside of current DOM hierarchy.

<ClickAwayListener onClickAway={handleClickAway}>
  <div>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <Portal>
        <div className={classes.dropdown}>
          Click me, I will stay visible until you click outside.
        </div>
      </Portal>
    ) : null}
  </div>
</ClickAwayListener>

Leading edge

By default, the component responds to the trailing events (click + touch end). However, you can configure it to respond to the leading events (mouse down + touch start).

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>

⚠️ In this mode, only interactions on the scrollbar of the document is ignored.


Accessibility
Was this page helpful?
CSS Baseline
Thanks for your feedback!

Please let us know what we could do to improve this page.