Skip to content
Edit this page
+

Click-Away Listener

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

DemosComponents API

ClickAwayListener API

Import

import ClickAwayListener from '@mui/base/ClickAwayListener';
// or
import { ClickAwayListener } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
children*element
The wrapped element.
⚠️ Needs to be able to hold a ref.
onClickAway*func
Callback fired when a "click away" event is detected.
disableReactTreeboolfalse
If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.
mouseEvent'onClick'
| 'onMouseDown'
| 'onMouseUp'
| 'onPointerDown'
| 'onPointerUp'
| false		'onClick'
The mouse event to listen to. You can disable the listener by providing false.
touchEvent'onTouchEnd'
| 'onTouchStart'
| false		'onTouchEnd'
The touch event to listen to. You can disable the listener by providing false.

The component cannot hold a ref.