Click-Away Listener

Introduction

Click-Away Listener is a utility component that listens for click events outside of its child. (Note that it only accepts one child element.)

This is useful for components like the Unstyled Popper which should close when the user clicks anywhere else in the document.

Click-Away Listener also supports the Portal component.

Component

Usage

After installation, you can start building with this component using the following basic elements:

import ClickAwayListener from '@mui/base/ClickAwayListener';

export default function MyApp() {
  return (
    <ClickAwayListener>
      {/* the child listening for a click outside of its container */}
    </ClickAwayListener>
  );
}

Basics

The following demo shows how to hide a menu dropdown when users click anywhere else on the page:

Usage with Portal

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

Customization

Listening for leading events

By default, the Click-Away Listener component responds to trailing events—the end of a click or touch.

You can set the component to listen for leading events (the start of a click or touch) using the mouseEvent and touchEvent props, as shown in the following demo:

Accessibility

By default, Click-Away Listener will add an onClick handler to its child. This can result in screen readers announcing that the child is clickable, even though this onClick handler has no effect on the child itself.

To prevent this behavior, add role="presentation" to the child element:

<ClickAwayListener>
  <div role="presentation">
    <h1>non-interactive heading</h1>
  </div>
</ClickAwayListener>

This is also required to fix a known issue in NVDA when using Firefox that prevents the announcement of alert messages—see mui/material-ui#29080 for details.