[DataGrid] Fix "stop editing" integration with IME e.g. Japanese (mui…

…#5257) Co-authored-by: Matheus Wichman <matheushw@outlook.com>
cherniavskii · Jul 6, 2022 · 17d5ff1 · 17d5ff1
1 parent 1ad4e82
commit 17d5ff1
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 0 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/cellEditing.DataGridPro.new.test.tsx
@@ -726,6 +726,38 @@ describe('<DataGridPro /> - Cell Editing', () => {
           deleteValue: true,
         });
       });
+
+      it(`should ignore keydown event until the IME is confirmed with a letter`, () => {
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('cellEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        const input = cell.querySelector('input')!;
+        fireEvent.change(input, { target: { value: 'あ' } });
+        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);
+        expect(input.value).to.equal('あ');
+        expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
+      });
+
+      it(`should ignore keydown event until the IME is confirmed with multiple letters`, () => {
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('cellEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        const input = cell.querySelector('input')!;
+        fireEvent.change(input, { target: { value: 'ありがとう' } });
+        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);
+        expect(input.value).to.equal('ありがとう');
+        expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
+      });
     });
   });
 

diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.new.test.tsx
@@ -728,6 +728,38 @@ describe('<DataGridPro /> - Row Editing', () => {
           deleteValue: true,
         });
       });
+
+      it(`should ignore keydown event until the IME is confirmed with a letter`, () => {
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('rowEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        const input = cell.querySelector('input')!;
+        fireEvent.change(input, { target: { value: 'あ' } });
+        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);
+        expect(input.value).to.equal('あ');
+        expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
+      });
+
+      it(`should ignore keydown event until the IME is confirmed with multiple letters`, () => {
+        render(<TestCase />);
+        const listener = spy();
+        apiRef.current.subscribeEvent('rowEditStop', listener);
+        const cell = getCell(0, 1);
+        fireEvent.doubleClick(cell);
+        const input = cell.querySelector('input')!;
+        fireEvent.change(input, { target: { value: 'ありがとう' } });
+        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);
+        expect(input.value).to.equal('ありがとう');
+        expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown');
+      });
     });
   });
 

diff --git a/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx b/packages/grid/x-data-grid-pro/src/tests/rowEditing.DataGridPro.old.test.tsx
@@ -447,4 +447,26 @@ describe('<DataGridPro /> - Row Editing', () => {
     clock.runToLast();
     expect(getRow(1)).not.to.have.class('MuiDataGrid-row--editing');
   });
+
+  it(`should ignore keydown event until the IME is confirmed`, () => {
+    const valueSetter = spy(({ row }) => row);
+    render(
+      <TestCase
+        editMode="row"
+        rows={[{ id: 0, text: 'こんにちは' }]}
+        columns={[{ field: 'text', editable: true, valueSetter }]}
+      />,
+    );
+
+    const cell = getCell(0, 0);
+    fireEvent.doubleClick(cell);
+    const input = cell.querySelector('input')!;
+    expect(input!.value).to.equal('こんにちは');
+    fireEvent.change(input, { target: { value: 'あ' } });
+    fireEvent.keyDown(input, { key: 'Enter', keyCode: 229 });
+    expect(valueSetter.callCount).to.equal(0);
+    fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });
+    expect(valueSetter.callCount).to.equal(1);
+    expect(input!.value).to.equal('あ');
+  });
 });
diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.new.ts
@@ -125,6 +125,12 @@ export const useGridCellEditing = (
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     (params, event) => {
       if (params.cellMode === GridCellModes.Edit) {
+        // Wait until IME is settled for Asian languages like Japanese and Chinese
+        // TODO: `event.which` is depricated but this is a temporary workaround
+        if (event.which === 229) {
+          return;
+        }
+
         let reason: GridCellEditStopReasons | undefined;
 
         if (event.key === 'Escape') {

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.old.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridCellEditing.old.ts
@@ -208,6 +208,12 @@ export const useCellEditing = (
 
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     async (params, event) => {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       const { id, field, cellMode, isEditable } = params;
       if (!isEditable) {
         return;

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.new.ts
@@ -167,6 +167,12 @@ export const useGridRowEditing = (
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     (params, event) => {
       if (params.cellMode === GridRowModes.Edit) {
+        // Wait until IME is settled for Asian languages like Japanese and Chinese
+        // TODO: `event.which` is depricated but this is a temporary workaround
+        if (event.which === 229) {
+          return;
+        }
+
         let reason: GridRowEditStopReasons | undefined;
 
         if (event.key === 'Escape') {

diff --git a/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.old.ts b/packages/grid/x-data-grid/src/hooks/features/editRows/useGridRowEditing.old.ts
@@ -212,6 +212,12 @@ export const useGridRowEditing = (
 
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     async (params, event) => {
+      // Wait until IME is settled for Asian languages like Japanese and Chinese
+      // TODO: `event.which` is depricated but this is a temporary workaround
+      if (event.which === 229) {
+        return;
+      }
+
       const { cellMode, isEditable } = params;
       if (!isEditable) {
         return;