• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Close the Popup on Blur

Environment

Product Version3.0.0
ProductProgress® KendoReact

Description

How the close the Popup when clicking outside of it?

Solution

This can be done by:

  1. Add a focusable container in the Popup (the Popup has no tabIndex by default).
  2. Focus the focusable container when the Popup is opened.
  3. On the onBlur event of that element close the Popup.

This is an example showcasing this:

Example
View Source
Change Theme:

In this article

Not finding the help you need?