Skip to content
+

Click-Away Listener

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

ClickAwayListener API

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
children*element-

The wrapped element.

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.