Updated focus handling.

ckeditor · Oct 7, 2024 · 54a65fe · 54a65fe
1 parent 8b5daff
commit 54a65fe
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/ckeditor5-engine/src/view/domconverter.ts b/packages/ckeditor5-engine/src/view/domconverter.ts
@@ -32,8 +32,9 @@ import {
  isComment,
  isValidAttributeName,
  first,
- env,
- getSelection
+ getSelection,
+ getParentOrHostElement,
+ env
 } from '@ckeditor/ckeditor5-utils';
 
 import type ViewNode from './node.js';
@@ -1090,9 +1091,11 @@ export default class DomConverter {
  */
  public focus( viewEditable: EditableElement ): void {
  const domEditable = this.mapViewToDom( viewEditable );
+ const rootNode = domEditable && ( domEditable.getRootNode() as ShadowRoot | DomDocument );
+ const activeElement = rootNode && rootNode.activeElement;
 
  // TODO ShadowRoot
- if ( domEditable && domEditable.getRootNode().activeElement !== domEditable ) {
+ if ( domEditable && activeElement !== domEditable ) {
  // Save the scrollX and scrollY positions before the focus.
  const { scrollX, scrollY } = global.window;
  const scrollPositions: Array<[ number, number ]> = [];
@@ -1851,7 +1854,8 @@ function forEachDomElementAncestor( element: DomElement, callback: ( node: DomEl
 
  while ( node ) {
  callback( node );
- node = node.parentElement; // TODO ShadowRoot
+ // TODO ShadowRoot
+ node = getParentOrHostElement( node ) as DomElement | null;
  }
 }
 

diff --git a/tests/manual/shadow.html b/tests/manual/shadow.html
@@ -15,7 +15,7 @@
  </style>
 </head>
 
-<p><button id="focus-editor">Focus editor component</button></p>
+<p><button id="focus-editor-component">Focus editor component</button></p>
 
 <div id="editor-component"></div>
 

diff --git a/tests/manual/shadow.js b/tests/manual/shadow.js
@@ -77,10 +77,12 @@ for ( const sheet of document.styleSheets ) {
 }
 
 // This requires delegatesFocus: true
-editorComponent.addEventListener( 'focus', () => window.editor.focus() );
+editorComponent.addEventListener( 'focus', () => {
+ window.editor.focus();
+}, { capture: true } );
 
-document.querySelector( 'button#focus-editor' ).addEventListener( 'click', () => {
- editorComponent.focus();
+document.querySelector( 'button#focus-editor-component' ).addEventListener( 'click', () => {
+ editorComponent.focus( { preventScroll: true } );
 } );
 
 ClassicEditor