From 21450deb54041f85ed8727dabcc8428fa4f4877a Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Wed, 2 Oct 2024 14:37:52 -0400 Subject: [PATCH] [datagrid] Revert "use `event.type` for detecting IME key press" (#14803) Signed-off-by: Rom Grk Co-authored-by: Olivier Tassinari --- .../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, 8 insertions(+), 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 index 9564c63bc621b..61eb25906561a 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,13 +958,7 @@ describe(' - 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(' - 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 index 716d799de53b3..d469b0bb87a29 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,13 +931,7 @@ describe(' - 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(' - 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 index e2be976204c9a..2fe01488b6d76 100644 --- 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 index d010bc3141587..1add4f0a64ad8 100644 --- 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; }