Command Center: Keyboard Focus lost when toggling Editor Preferences or Code Editor

[jordesign]

Description

When toggling panels like the Editor Preferences or Code Editor - the editor no longer has focus once those are closed, so the keyboard shortcut for the Command Center doesn't work.

Step-by-step reproduction instructions

1. Open the Site Editor and edit a template or page
2. Use the command-k shortcut to confirm the Command Center loads - use it to open the Editor Preferences.
3. Close the Editor Preferences
4. Use the command-k shortcute to try and open the Command Center again

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.3 beta 2
• Gutenberg 16.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[stokesman]

In regards to the Editor Preferences, I think it depends on how you close the Modal. Using the close button or pressing Esc should maintain focus as expected. Clicking outside the modal drops it #51722.

For the Code Editor, I confirm it doesn't matter how you engage/disengage (keyboard shortcut or Options menu) focus is lost.

[jordesign]

I find this also happens when opening/closing the Command Center/Palette with the mouse.

after triggering the command palette by clicking in the title bar at the top, and then clicking outside the palette to remove it - the main window no longer had focus - so the keyboard command would not work.

[annezazu]

@afercia @alexstine @joedolson in case any of you can test and provide feedback here <3

[joedolson]

Yes, I can confirm that this happens. The focus is handled on esc, but not on mouse click. It seems to me that focus placement should be connected to the action ("close the modal") rather than to the event ("press esc"), so that it is consistent regardless of the mechanism used for closing.

Also, I don't understand why the command center doesn't have a close button.

[afercia]

Also, I don't understand why the command center doesn't have a close button.

I'd second this. All modal dialogs should always have a CLose button. The Modal component dos provide it by default but it has an option to hide the dialog header, including the Close button. There are other cases of modal dialogs where the dialog header is hidden, I guess only for visual design purposes.

Regarding this specific issue:

Switching between Visual editor and Code editor

Focus should stay in the most appropriate place but there are two different cases to consider:

• Switching via the Options menu: I think focus should stay on the button that has been activated.
• Instead, when switching via keyboard shortcut Shift+Option+Command+M focus should stay where it was, or be set to the most appropriate place e.g.:
  • One of the blocks is selected? Shift+Option+Command+M > focus is set on the Code textarea > Shift+Option+Command+M > focus is set back on the block that was selected
  • Any other UI control is selected? Shift+Option+Command+M > focus stays on the focused control, whatever it is.

Implementing some proper focus management would solve the Cmd+K shortcut issue.

Modal dialogs

The Modal component default behavior is:

• When the modal dialog, focus is restored to the control that opened the modal dialog.
• Not surprisingly this pattern can't work when a modal dialog is opened via the Command center, simply because the focused control that opened the modal dialog (the item in the Command center) isn't in the DOM any longer. As such, focus is lost and the Cmd+K shortcut doesn't work.

Worth noting that this impacts any keyboard shortcut, not only Cmd+K. When focus is lost, no element in the main window has focus. Other shortcuts e.g. Control+Option+H won't work.

Overall:

• Keyboard shortcuts don't work any longer when there's a full focus loss.
• The way the Command center has been designed breaks the Modal component focus management (and possibly other components focus management). I'd consider this a regression. I'm going to mark this issue as such.

[afercia]

For reference: the modal dialog 'focus on close' management is handled by useFocusReturn from the compose package.

[annezazu]

Adding to to do in 6.3. Thank you all for the feedback and testing!

[stokesman]

Andrea’s breakdown of this is great 👏 . I'll make a PR later today for the return of focus from modals. The Code Editor part should probably be a separate effort.

[afercia]

Thank you @stokesman
I will create a separate issue for the Code / Visual editor.

[tellthemachines]

Now that #52710 has been merged, and given that the code editor issue is tracked in #42145 are we good to close this one or is there still anything left to do here?