The ClickAwayListener component detects when a click event happens outside of its child element.
- 📦 992 B gzipped.
- ⚛️ Supports portals
For instance, if you need to hide a menu dropdown when people click anywhere else on your page:
Notice that the component only accepts one child element. You can find a more advanced demo on the Menu documentation section.
The following demo uses
Portal to render the dropdown into a new "subtree" outside of current DOM hierarchy.
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 /> will add an
onClick handler to its children.
This can result in e.g. screen readers announcing the children as clickable.
However, the purpose of the
onClick handler is not to make
In order to prevent screen readers from marking non-interactive children as "clickable" add
role="presentation" to the immediate children:
<ClickAwayListener> <div role="presentation"> <h1>non-interactive heading</h1> </div> </ClickAwayListener>
This is also required to fix a quirk in NVDA when using Firefox that prevents announcement of alert messages (see mui/material-ui#29080).
As the component does not have any styles, it also comes with the Base package.
import ClickAwayListener from '@mui/base/ClickAwayListener';
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.