ClickAwayListener Component Test

Basic ClickAway Detection

Click outside the blue box to trigger the clickaway event.

Click Away Target

Clicking inside this box will NOT trigger the clickaway event. Clicking outside will trigger it.

Dropdown Menu

Click the button to open the menu, then click outside to close it.

Modal Dialog

Open the modal and click outside the white area to close it.

Different Event Types

Test different mouse and touch events.

MouseDown Event

Triggers on mousedown outside

MouseUp Event

Triggers on mouseup outside

Disabled State

Toggle the disabled state to control click away detection.

Disabled Listener

This listener is disabled and won't trigger clickaway events.

Programmatic API Test

Test the programmatic createClickAwayListener function.

Programmatic Target

This uses the programmatic API instead of the web component.