ClickAwayListener detects clicks outside a target region and enables closing transient UI through outside clicks.

Basic ClickAwayListener

ClickAwayListener monitors clicks and touches outside the wrapped element and calls the onClickAway callback when that happens.

Custom events

You can tailor when the click-away behavior triggers by configuring the mouseEvent and touchEvent props.

Dismissible UI patterns

ClickAwayListener is most useful for overlay patterns like dropdowns, popovers, and menus. Keep all interactive child elements inside the wrapper to avoid unintentional dismissal.