Changeset 63759

Timestamp:

09/18/2026 10:33:37 AM (10 hours ago)

Author:

afercia

Message:

Editor: Don't move focus to the Classic editor when using the keyboard to switch editor mode.

Pointing device (mouse, touch, etc.) users benefit from focus being moved to the editor when switching it from Visual to Code mode and vice-versa, as they can just keep typing without loosing the previous caret position or selection. However, moving focus is confusing and distracting to keyboard and screen reader users as they loose their place. In this case, focus should stay on the switch buttons.

Previous caret position or selection is preserved in both cases.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13560

Props shreya0shrivastava, dannerjamanca, arkaprabhachowdhury, afercia.
Fixes #42540.

File:

• trunk/src/js/_enqueues/wp/editor/base.js (modified) (5 diffs)

trunk/src/js/_enqueues/wp/editor/base.js

@@ -22 +22 @@
         function SwitchEditors() {
                 var tinymce, $$,
-                        exports = {};
+                        exports = {},
+                        isPointingDevice = false;
 
                 /**
@@ -43 +44 @@
                                                 target = $$( event.target );
 
+
                                         if ( target.hasClass( 'wp-switch-editor' ) ) {
+                                                /*
+                                                 * Determine whether the click event is fired by using
+                                                 * a pointing device including Safari fallback and
+                                                 * unknown hardware pointers.
+                                                 */
+                                                isPointingDevice = event.detail > 0 || ( event.pointerType !== undefined && event.pointerType !== '' );
+
                                                 id = target.attr( 'data-wp-editor-id' );
                                                 mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';
@@ -119 +128 @@
 
                                 if ( editor ) {
+                                        // Store the original TinyMCE editor focus() method.
+                                        const originalEditorFocusInstance = editor.focus;
+
+                                        /*
+                                         * Override the editor's focus method to conditionally skip
+                                         * focusing the editor based on the input device. Note that
+                                         * editor.focus() aleady uses a `skipFocus` parameter. When
+                                         * it is true, it calls activateEditor(editor) instead of
+                                         * focusEditor(editor).
+                                         */
+                                        editor.focus = function ( skipFocus ) {
+                                                if ( ! isPointingDevice) {
+                                                        skipFocus = true;
+                                                }
+
+                                                originalEditorFocusInstance.call( editor, skipFocus );
+                                        };
+
+                                        /*
+                                         * The editor show() method calls several other methods that
+                                         * end up setting focus to the editor. We want to skip
+                                         * setting focus when switching editors and the user is
+                                         * using a keyboard or a non-pointing device.
+                                         */
                                         editor.show();
 
@@ -535 +568 @@
 
                         if ( startNode.length ) {
-                                editor.focus();
+                                if ( isPointingDevice ) {
+                                        editor.focus();
+                                }
 
                                 if ( ! endNode.length ) {
@@ -839 +874 @@
                                 end = selection.end || selection.start;
 
-                        if ( textArea.focus ) {
-                                // Wait for the Visual editor to be hidden, then focus and scroll to the position.
+                        /*
+                         * Guard against the scenarios where editor.getElement() may return
+                         * something that isn't a standard textarea element e.g. the editor
+                         * may have been removed/destroyed/mutated.
+                         */
+                        if ( ! textArea.focus ) {
+                                return;
+                        }
+
+                        /**
+                         * Applies the selection range to the textarea.
+                         */
+                        function applySelection() {
+                                /*
+                                 * In Safari, the focus event fires before the browser has fully
+                                 * completed the focus transition. Calling setTimeout with a 0ms
+                                 * delay queues the callback function task into the task queue
+                                 * so that the callback is executed after all pending tasks have
+                                 * cleared. Safe for other browsers.
+                                 */
                                 setTimeout( function() {
+                                        // Guard against the editor being destroyed during the timeout.
+                                        if ( ! textArea.isConnected ) {
+                                                return;
+                                        }
+
                                         textArea.setSelectionRange( start, end );
+                                }, 0 );
+                        }
+
+                        // Logic for pointing devices.
+                        if ( isPointingDevice ) {
+                                setTimeout( function() {
+                                        applySelection();
                                         if ( textArea.blur ) {
-                                                // Defocus before focusing.
                                                 textArea.blur();
                                         }
                                         textArea.focus();
                                 }, 100 );
+                        } else {
+                                /*
+                                 * For non-pointing devices: wait until users move focus into the
+                                 * textarea (e.g. via keyboard Tab), then restore the selection.
+                                 * By using `once`, the listener is invoked at most once after
+                                 * being added and it's automatically removed when invoked.
+                                 */
+                                textArea.addEventListener( 'focus', applySelection, { once: true } );
                         }
                 }