Setting the Initial Focus on the Editor when the Dialog or Window is Opened
Environment
| Product | Progress® Kendo UI® for Angular Editor | Progress® Kendo UI® for Angular Dialogs |
Description
When using the Kendo UI Editor inside an Angular Dialog or Window, setting focus automatically to the editor can be challenging due to the editor's delayed rendering. This prevents the autoFocusedElement from working as expected. This article demonstrates how to set the initial focus on the Editor when the Dialog or Window is opened.
This knowledge base article also answers the following questions:
- How to automatically focus the Editor in an Angular Dialog and Window?
- What is the workaround for focusing elements with delayed rendering in Angular?
- Can I focus the Kendo UI Editor when opening an Angular Dialog or Window?
Solution
Handle the opening of the Dialog or Window component and use the Editor's focus method to set the initial focus on the Editor. You should use some delay to ensure that the Editor is rendered before focusing it. The solution can be implemented in both Dialog and Window components.
The following example demonstrates how to focus the Editor when the Dialog is opened using rxjs observables and the delay operator.