Dropdown: filter IME Enter bug

[CRC32EX]

Describe the bug

Pressing the Enter key to confirm a converted word in the Japanese IME causes the filter dialog to close unexpectedly.

This problem happen on Remix.
Vite is no problem.

Reproducer

https://stackblitz.com/edit/remix-run-remix-9ccvms25

System Information

System:
  OS: Windows 11 10.0.22621
  CPU: (16) x64 AMD Ryzen 7 9800X3D 8-Core Processor
  Memory: 44.36 GB / 61.59 GB
Binaries:
  Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
  npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  pnpm: 9.14.2 - C:\Program Files\nodejs\pnpm.CMD
Browsers:
  Edge: Chromium (131.0.2903.51)
  Internet Explorer: 11.0.22621.3527

Steps to reproduce the behavior

1. Click Dropdown
2. type おんせん
3. press space key (convert word)
4. press enter key (confirm convert word)
5. Dropdown closed unexpectedly.

Expected behavior

• Do not close Dropdown
  • Vite is no problem. idk why.
    • Reproducer

Possible solution

https://gist.github.com/CRC32EX/b05988bb96bf7910a25cad74f5a9c589/revisions

primereact/components/lib/dropdown/Dropdown.js

+ if (event.is_composing === false) {
+  onEnterKey(event);
+ }

Reference

• https://webfrontend.ninja/js-input-ime-enter/

[bizwms]

We are facing the same bug. Does anyone have a good workaround?

[CRC32EX]

@bizwms

It's my workaround.
It's working successfully for me.

But we need root solution.

Step to workaround

1. open dropdown.js

(project_root_directory)/node_modules/primereact/dropdown/dropdown.esm.js

2. edit

  case 'Enter':
  case 'NumpadEnter':
+  if (event.is_composing === false) {
+    onEnterKey(event);
+  }
    event.preventDefault();
    break;

3.(optional) delete .vite directory for clear cache
I'm using Vite. so i have to delete .vite directory.

(project_root_directory)/node_modules/.vite

4. run or build

npm run dev
npm run build

[bizwms]

@CRC32EX
Thank you for sharing your workaround. I tried implementing it, but I'm still facing the issue where the search textbox disappears when I press Enter. Additionally, as this is for a production environment, modifying the node_modules directly isn't feasible. Do you have any other suggestions or workarounds that might help resolve this issue without altering the node_modules?

[CRC32EX]

@bizwms

Do you have any other suggestions or workarounds that might help resolve this issue without altering the node_modules?

No. It's Impossible.

But, i have an idea.
Try, function hooking.
(not React hooks. try JavaScript function hooking)

Notice.
I don't know it's possible or not.
Just want share ideas.

[bizwms]

@CRC32EX

Thank you for your reply.
The previous version (“primereact”:“^9.6.3”) was fine.
I hope the PrimeReact team can fix it.

[bizwms]

primereact“:”^9.6.3” code in the corresponding section.

    var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
      switch (event.which) {
        //down
        case 40:
          onDownKey(event);
          break;

        //up
        case 38:
          onUpKey(event);
          break;

        //enter and escape
        case 13:
        case 27:
          hide();
          event.preventDefault();
          break;
      }
    };

[ryrocks]

I found an event that is not listed on the PrimeReact site, and I believe it can resolve the composition issue.

Here’s my implementation:

onKeyDownCapture={(e: React.KeyboardEvent) => {
    if (e.nativeEvent.isComposing && (e.key === 'Enter' || e.key === 'NumpadEnter')) {
        e.preventDefault();
        e.stopPropagation();
    }
}}

[melloware]

@ryrocks can you submit a PR?

[bizwms]

@CRC32EX
@ryrocks

The KeyboardEvent for the Japanese IME when pressing Enter to confirm a converted word is “Proccess”, but Chrome and Safari on the Mac do not seem to support this specification.

                    onKeyDownCapture={(e: React.KeyboardEvent) => {
                        if (
                            e.nativeEvent.isComposing &&
                            (e.key === 'Enter' || e.key === 'NumpadEnter' || e.key === 'Process')
                        ) {
                            e.preventDefault();
                            e.stopPropagation();
                        }
                    }}

Reference
https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#ime_and_composition_keys
https://qiita.com/alt_yamamoto/items/8663d047a3794dd5605e