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';
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.