[datagrid] Revert "use event.type for detecting IME key press" (#14803

) Signed-off-by: Rom Grk <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
mui · Oct 2, 2024 · 21450de · 21450de
1 parent 4148642
commit 21450de
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 46 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx
@@ -958,13 +958,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'あ' } });
-        fireEvent.keyDown(cell, {
-          type: 'compositionstart',
-          isComposing: true,
-          charCode: 'あ'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
+        fireEvent.keyDown(cell, { key: 'Enter', keyCode: 229 });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);
@@ -980,22 +974,7 @@ describe('<DataGridPro /> - Cell editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'ありがとう' } });
-
-        fireEvent.keyDown(cell, {
-          type: 'compositionstart',
-          isComposing: true,
-          charCode: 'あ'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
-        fireEvent.keyDown(cell, {
-          type: 'compositionupdate',
-          isComposing: true,
-          charCode: 'う'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
-
+        fireEvent.keyDown(cell, { key: 'Enter', keyCode: 229 });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);

diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx
@@ -931,13 +931,7 @@ describe('<DataGridPro /> - Row editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'あ' } });
-        fireEvent.keyDown(input, {
-          type: 'compositionstart',
-          isComposing: true,
-          charCode: 'あ'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
+        fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);
@@ -953,20 +947,7 @@ describe('<DataGridPro /> - Row editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'ありがとう' } });
-        fireEvent.keyDown(input, {
-          type: 'compositionstart',
-          isComposing: true,
-          charCode: 'あ'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
-        fireEvent.keyDown(input, {
-          type: 'compositionupdate',
-          isComposing: true,
-          charCode: 'う'.charCodeAt(0),
-          bubbles: true,
-          cancelable: true,
-        });
+        fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -127,7 +127,8 @@ export const useGridCellEditing = (
     (params, event) => {
       if (params.cellMode === GridCellModes.Edit) {
         // Wait until IME is settled for Asian languages like Japanese and Chinese
-        if (event.type === 'compositionstart' || event.type === 'compositionupdate') {
+        // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
+        if (event.which === 229) {
           return;
         }
 

diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -186,7 +186,8 @@ export const useGridRowEditing = (
     (params, event) => {
       if (params.cellMode === GridRowModes.Edit) {
         // Wait until IME is settled for Asian languages like Japanese and Chinese
-        if (event.type === 'compositionstart' || event.type === 'compositionupdate') {
+        // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
+        if (event.which === 229) {
           return;
         }