Closing the KendoReact Dialog When Clicking Outside

Updated on Apr 3, 2026

Environment

Product Version	14.2.0
Product	Progress® KendoReact Dialog

Description

I want to close the KendoReact Dialog when the user clicks anywhere outside of it. By default, the Dialog only closes when the built-in close button or an explicit action button is pressed.

This knowledge base article also answers the following questions:

• How to close the KendoReact Dialog on overlay click?
• How can I implement outside-click handling for the KendoReact Dialog?
• How to toggle KendoReact Dialog visibility when clicking the backdrop?

Solution

When the Dialog is visible it renders a .k-overlay element that covers the rest of the page. Use a React.useEffect to attach a click listener to that overlay whenever the Dialog opens, and clean it up when the Dialog closes or unmounts.

Change Theme

Theme

Loading ...

Key Details

• .k-overlay: The semi-transparent backdrop element rendered by the Dialog behind the modal window.
• useEffect with visible dependency: Attaches the listener only while the Dialog is open and removes it automatically on close or unmount, preventing memory leaks.
• setVisible(false) inside the handler: Using the state setter directly avoids stale-closure issues that can occur when referencing a toggle function defined outside the effect.

See Also

• KendoReact Dialog Overview
• Dialog onClose Property
• Centering KendoReact Dialog Within a Parent Component