Skip to content
+

Click-Away Listener

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

Component demosComponents API

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

childrenRequired

The wrapped element.

Type:element

onClickAwayRequired

Callback fired when a "click away" event is detected.

Type:func

disableReactTree

If true, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled.

Type:bool

Default:false

mouseEvent

The mouse event to listen to. You can disable the listener by providing false.

Type:'onClick'
| 'onMouseDown'
| 'onMouseUp'
| 'onPointerDown'
| 'onPointerUp'
| false

Default:'onClick'

touchEvent

The touch event to listen to. You can disable the listener by providing false.

Type:'onTouchEnd'
| 'onTouchStart'
| false

Default:'onTouchEnd'


The component cannot hold a ref.