CommandPalette: Pressing enter to complete the conversion will execute the command

[minkapi]

Description

In WordPress 6.3 RC-1, entering Japanese (hiragana) into the command palette, converting it to kanji or other characters, and pressing enter will execute the command rather than completing the conversion.

When entering characters in Japanese language ( including Kanji), after entering "Hiragana", select which character to convert to and press Enter to confirm. I would expect the same problem in other languages that perform the same operation.

Step-by-step reproduction instructions

I expect users to use a Japanese keyboard.

1. Access "Appearance > Editor"
2. Access "Navigation"
3. Press Cmd-k(macOS)
4. Type "とうこう" and press enter to convert it to "投稿"
5. Instead of the conversion being confirmed, the user is redirected to the Add New Post page that is in focus

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.3 RC-1
• Using WordPress Beta Tester plugin. All other plugins are disabled.
• macOS Chrome 115.0.5790.98

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

[t-hamano]

Thanks for the report.

I have not been able to reproduce this problem, but it might be because it is a Windows OS. The Enter key to confirm the input character did not execute the command.

As a supplement, the command palette uses cmdk, an external library. However, since it appears that it is possible to intervene in the keydown event, the following code might be able to fix the problem. This approach is also taken by #45607, #45626, and others.

diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index b4a828f343..c02ddd4208 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -201,6 +201,21 @@ export function CommandMenu() {
        if ( ! isOpen ) {
                return false;
        }
+
+       const onKeyDown = ( event ) => {
+               if (
+                       // Ignore keydowns from IMEs
+                       event.nativeEvent.isComposing ||
+                       // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+                       // is `isComposing=false`, even though it's technically still part of the composition.
+                       // These can only be detected by keyCode.
+                       event.keyCode === 229
+               ) {
+                       console.log( 'prevented!' );
+                       event.preventDefault();
+               }
+       };
+
        const isLoading = Object.values( loaders ).some( Boolean );

        return (
@@ -211,7 +226,10 @@ export function CommandMenu() {
                        __experimentalHideHeader
                >
                        <div className="commands-command-menu__container">
-                               <Command label={ __( 'Command palette' ) }>
+                               <Command
+                                       label={ __( 'Command palette' ) }
+                                       onKeyDown={ onKeyDown }
+                               >
                                        <div className="commands-command-menu__header">
                                                <Command.Input
                                                        ref={ commandMenuInput }

I hope more people will test this issue.

Test Environment and Screencasts

• OS: Windows 11
• Browser: Chrome115.0.5790.98, Firefox 115.0.2

https://github.com/WordPress/gutenberg/assets/54422211/880608f6-40db-4528-9653-922fadff7a4b

[torounit]

The following environments were tested.

Browser	result
Chrome ( 115 / 114 ) on Mac	reproduced
Chrome ( 115 / 114 ) on Windows	not reproduced
Safari 16.5.2 on Mac	reproduced
firefox 115 on Mac	not reproduced
firefox 115 on Windows	not reproduced
Edge 114 on Windows	not reproduced