Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
minkapi opened this issue Jul 21, 2023 · 2 comments · Fixed by #52844
Closed

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

minkapi opened this issue Jul 21, 2023 · 2 comments · Fixed by #52844
Assignees
Labels
Needs Testing Needs further testing to be confirmed. [Package] Commands /packages/commands [Status] In Progress Tracking issues with work in progress

Comments

@minkapi
Copy link

minkapi commented Jul 21, 2023

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

commandpalette-enter

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
Copy link
Contributor

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
4a0a50a3f3abc99665e7448a9d3795cc.mp4

@t-hamano t-hamano added Needs Testing Needs further testing to be confirmed. [Package] Commands /packages/commands labels Jul 21, 2023
@torounit
Copy link
Member

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

@torounit torounit self-assigned this Jul 21, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jul 21, 2023
ramonjd added a commit that referenced this issue Jul 28, 2023
* Patterns: Enable focus mode editing (#52427)

* PreventDefault when isComposing is true. apply patch from t-hamano. (#52844)

see: #52821 (comment)

* List View: Ensure onDrop does not fire if there is no target (#52959)

* I18N: Add missing Gettext wrapper on strings in Edit Post overview sidebar (#52971)

* I18N: Add missing gettext wrapper

* Add context to disambiguate 'Outline' that is commonly used on borders.

* Footnotes: disable based on post type (#52934)

* Footnotes: disable based on post type

* Address feedback

* Fix typo

* Format: disable if block is not registered

* Lock usesContext api

* Use Symbol instead of Math.random

* Patterns Browse Screen: Fix back button when switching between categories (#52964)

* Patterns: Allow orphaned template parts to appear in general category (#52961)

* Spacing presets: fix bug with select control adding undefined preset values (#53005)

* Site Editor: Fix canvas mode sync with URL (#52996)

* Check if spacing tool is defined before displaying controls. (#53008)

* Check if spacing tool is defined before displaying controls.

* Don't show sides if spacing type false

* Improve consistency of the Post editor and Site editor Document actions (#52246)

* Remove redundant shortcut button.

* Fix focus and hover style and improve consistency.

* Rename post document-title and improve CSS consistency.

* Site Editor: Fix the typo in the title label map (#53071)

* Fix patterns search crash: check for existence of defaultView before attempting to get styles (#52956)

* backport paging bug fixes (#53091)

---------

Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Hiroshi Urabe <[email protected]>
Co-authored-by: Andrew Serong <[email protected]>
Co-authored-by: Pedro Mendonça <[email protected]>
Co-authored-by: Ella <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: Andrea Fercia <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Testing Needs further testing to be confirmed. [Package] Commands /packages/commands [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants