Skip to content

Click-Away Listener

The Click-Away Listener component detects when a click event happens outside of its child element.


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 Popper which should close when the user clicks anywhere else in the document.

Click-Away Listener also supports the Portal component.


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

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

Press Enter to start editing

Usage with Portal

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

Press Enter to start editing


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:

Press Enter to start editing


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:

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

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.