From 24c0442f1e3b33198df0b757d4dccc66be5e6526 Mon Sep 17 00:00:00 2001
From: Rajat <robertdoweny2301@gmail.com>
Date: Tue, 1 Oct 2024 18:18:21 +0530
Subject: [PATCH] [data-grid]: use `event.type`  for detecting IME key press
 (#14146)

---
 .../tests/cellEditing.DataGridPro.test.tsx    | 25 +++++++++++++++++--
 .../src/tests/rowEditing.DataGridPro.test.tsx | 23 +++++++++++++++--
 .../features/editing/useGridCellEditing.ts    |  3 +--
 .../features/editing/useGridRowEditing.ts     |  3 +--
 4 files changed, 46 insertions(+), 8 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
index 61eb25906561..9564c63bc621 100644
--- 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,7 +958,13 @@ describe('<DataGridPro /> - Cell editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'あ' } });
-        fireEvent.keyDown(cell, { key: 'Enter', keyCode: 229 });
+        fireEvent.keyDown(cell, {
+          type: 'compositionstart',
+          isComposing: true,
+          charCode: 'あ'.charCodeAt(0),
+          bubbles: true,
+          cancelable: true,
+        });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(cell, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);
@@ -974,7 +980,22 @@ describe('<DataGridPro /> - Cell editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'ありがとう' } });
-        fireEvent.keyDown(cell, { key: 'Enter', keyCode: 229 });
+
+        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,
+        });
+
         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
index d469b0bb87a2..716d799de53b 100644
--- 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,7 +931,13 @@ describe('<DataGridPro /> - Row editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'あ' } });
-        fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
+        fireEvent.keyDown(input, {
+          type: 'compositionstart',
+          isComposing: true,
+          charCode: 'あ'.charCodeAt(0),
+          bubbles: true,
+          cancelable: true,
+        });
         expect(listener.callCount).to.equal(0);
         fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
         expect(listener.callCount).to.equal(1);
@@ -947,7 +953,20 @@ describe('<DataGridPro /> - Row editing', () => {
         fireEvent.doubleClick(cell);
         const input = cell.querySelector('input')!;
         fireEvent.change(input, { target: { value: 'ありがとう' } });
-        fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
+        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,
+        });
         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
index bb2224185e8e..e2be976204c9 100644
--- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
+++ b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts
@@ -127,8 +127,7 @@ export const useGridCellEditing = (
     (params, event) => {
       if (params.cellMode === GridCellModes.Edit) {
         // Wait until IME is settled for Asian languages like Japanese and Chinese
-        // TODO: `event.which` is deprecated but this is a temporary workaround
-        if (event.which === 229) {
+        if (event.type === 'compositionstart' || event.type === 'compositionupdate') {
           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
index 3953006c4b33..d010bc314158 100644
--- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
+++ b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts
@@ -186,8 +186,7 @@ export const useGridRowEditing = (
     (params, event) => {
       if (params.cellMode === GridRowModes.Edit) {
         // Wait until IME is settled for Asian languages like Japanese and Chinese
-        // TODO: `event.which` is deprecated but this is a temporary workaround
-        if (event.which === 229) {
+        if (event.type === 'compositionstart' || event.type === 'compositionupdate') {
           return;
         }