[Solved] Prevent moving focus from kendo editor toolbar button on press

[Miljana]

Actual behavior - After pressing the toggle button, focus directly moves to the textarea.

Expected behavior - Focus should remain on button pressed.

Is there a way to implement this? Code is attached:

    <kendo-editor
      #editor
      [(ngModel)]="commentValue"
      [iframe]="false"
    >
      <kendo-toolbar>
        <kendo-toolbar-buttongroup>
          <kendo-toolbar-button
            kendoEditorBoldButton
            [ariaLabel]="'Bold'"
          ></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
      </kendo-toolbar>
   </kendo-editor>

 

[Vessy]

Hi, Miljana,

To keep the built-in Bold tool and leave its button focused after activation, restore focus from the click event after the tool finishes processing the action.

The built-in formatting tools return focus to the editing area so users can continue typing after applying a command. The following customization preserves the Bold tool’s formatting behavior and automatic selected-state handling:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { KENDO_EDITOR } from '@progress/kendo-angular-editor';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_EDITOR, KENDO_TOOLBAR],
  template: `
    <kendo-editor [(ngModel)]="commentValue" [iframe]="false">
      <kendo-toolbar [overflow]="false">
        <kendo-toolbar-buttongroup>
          <kendo-toolbar-button
            kendoEditorBoldButton
            title="Bold"
            [toggleable]="true"
            (click)="retainToolFocus($event)"
          ></kendo-toolbar-button>
        </kendo-toolbar-buttongroup>
      </kendo-toolbar>
    </kendo-editor>
  `
})
export class AppComponent {
  public commentValue = '';

  public retainToolFocus(event: MouseEvent): void {
    const button = event.currentTarget;

    if (button instanceof HTMLButtonElement) {
      queueMicrotask(() => {
        if (button.isConnected && !button.disabled) {
          button.focus({ preventScroll: true });
        }
      });
    }
  }
}

This restores focus to the button even when its icon is clicked. The editing area still receives focus briefly, so its focus and blur events will still fire.

If you need to prevent that focus transfer altogether, replace the built-in directive with a custom command button:

<kendo-editor #editor [(ngModel)]="commentValue" [iframe]="false">
  <kendo-toolbar [overflow]="false">
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button
        text="Bold"
        title="Bold"
        [toggleable]="true"
        [disabled]="editor.disabled || editor.readonly"
        (click)="editor.exec('bold', editor.applyToWord)"
      ></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
  </kendo-toolbar>
</kendo-editor>

Use the same component imports for this alternative. Remove kendoEditorBoldButton to prevent its built-in click action from running as well.

With a custom button, you need to manage selected-state synchronization if its highlight should reflect the formatting at the caret position. The button’s toggle state alone only reflects button clicks. The examples use title because ariaLabel is not a supported input of the ToolBarButton component.

For more information, see Editor toolbar commands and the ToolBar button API.

Regards,
Vessy
Progress Telerik