[data grid] Broken "stop editing" integration with IME e.g. Japanese

[oliviertassinari]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

IME keys are not processed correctly

Expected Behavior 🤔

IME keys are processed correctly

Steps to Reproduce 🕹

Steps:

1. Open https://material-ui.com/components/data-grid/editing/#cell-editing
2. See how pressing Enter shouldn't exit the edit mode. The end-user isn't done yet.

Aug-14-2021.11-30-31.mp4

The same happens with Escape.

version 4.0.0-alpha.38

Context 🔦

We saw this request by email:

I bought and use xgrid and am trying to figure out Japanese IME composition in x-grid.

When I type Japanese in a cell, typing Japanese letters and converting them into Chinese character (Kanji) for example, it ends composition and goes to next cell.

Is there any good way not to finish the composition session. I believe people use onCompositionEnd, onCompositionStart and onCompositionUpdate but you are only able to use them in , not

mui/material-ui#23044
mui/material-ui#19435
mui/material-ui#19499
mui/material-ui#23050

Sometimes, I feel that we should kill the x@mui.com email to force all communications to happen on GitHub cc @mui-org/x & @mbrookes

[oliviertassinari]

This is an easy one to fix:

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
index 9de65f42..a6f97119 100644
--- a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
+++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
@@ -250,6 +250,12 @@ export function useGridEditRows(
         apiRef.current.commitCellChange({ id, field }, event);
         apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
       }
+
+      // Wait until IME is settled.
+      if (event.which === 229) {
+        return;
+      }
+
       if (isEditMode && isCellEditCommitKeys(event.key)) {
         const commitParams = { id, field };
         if (!apiRef.current.commitCellChange(commitParams, event)) {

However, I didn't work on it because it would likely create a git merge conflict with #2098. For the test cases, a quick simple one is probably enough. It's also in the realm of open-source, so we could leave it up to the community to work on it.

[taeslee]

Hi @oliviertassinari,

I would like to work on this issue. Can you assign me to this issue?

[flaviendelangle]

Here you are 👍

[taeslee]

It seems like this issue was already resolved.
https://user-images.githubusercontent.com/64485716/134408162-295b170c-e053-4857-be7e-484d71473264.mp4

IMEJapanese.mp4

[oliviertassinari]

I have just tried on https://mui.com/components/data-grid/editing/#cell-editing, it's still broken for me on macOS.

[guoyunhe]

I developed a similar React component in Alibaba. The way I find to support IME is to always mount an <input> with focus. When it is inactive, just set opacity to hide it.

In DataGrid, when users type "wo" in IME, "w" is always inserted as it is because here is no <input/> when users type "w", so the IME cannot spell "我". Mounting an invisible <input/> will solve the issue.

[alepuente]

@guoyunhe Is there any code example you can show me?

[oliviertassinari]

I have just tested this on AG Grid's live demo, they don't support it. The bug was reported in ag-grid/ag-grid#4435.