[data grid] Broken "start editing" integration with Japanese

[vuduy97]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I create a table that allows to edit cells but have problem entering values, if you don't enter edit mode before entering text but only focus on the cell you want to edit and enter values ​​too, i have problem using keyboard japanese, the first value doesn't get the value of the language I use, it only accepts the value of the keyboard that I press

error.mp4

Expected behavior 🤔

I would like to be able to get the first value which is the one using the keyboard type i use

success.mp4

Steps to reproduce 🕹

Steps:

1.focus the cell you want edit (not enter the edit mode in this cell)
2.change the keyboard in use to Japanese
3.enter input value (like ああああああ)

Context 🔦

I get the value of　aああああ, instead of　あああああ

Your environment 🌎

@mui/x-data-grid: v5.9.0

System:
    OS: Linux 5.13 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Firefox: 99.0
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base: ^5.0.0-alpha.74 => 5.0.0-alpha.77 
    @mui/icons-material: ^5.6.0 => 5.6.2 
    @mui/lab: ^5.0.0-alpha.76 => 5.0.0-alpha.78 
    @mui/material: ^5.6.0 => 5.6.2 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/styles: ^5.6.0 => 5.6.2 
    @mui/system:  5.6.2 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @mui/x-data-grid: ^5.7.0 => 5.9.0 
    @mui/x-data-grid-generator: ^5.8.0 => 5.9.0 
    @mui/x-data-grid-pro: ^5.8.0 => 5.9.0 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @mui/x-license-pro:  5.9.0 
    @types/react: ^17.0.43 => 17.0.44 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: ^4.6.3 => 4.6.3 

Order ID 💳 (optional)

No response

[m4theushw]

We need to update the regex that detect printable characters to include Japanese characters as well.

mui-x/packages/grid/x-data-grid/src/utils/keyboardUtils.ts

Lines 16 to 17 in 90c3988

	const printableCharRegex = /^(\p{L}|\p{M}\p{L}|\p{M}|\p{N}|\p{Z}|\p{S}|\p{P})$/iu;
	export const isPrintableKey = (key: string) => printableCharRegex.test(key);

[oliviertassinari]

We have a similar issue #2338 but for the stop editing.

[oliviertassinari]

Would this work?

diff --git a/packages/grid/x-data-grid/src/utils/keyboardUtils.ts b/packages/grid/x-data-grid/src/utils/keyboardUtils.ts
index 7191c6c0..e8642cd7 100644
--- a/packages/grid/x-data-grid/src/utils/keyboardUtils.ts
+++ b/packages/grid/x-data-grid/src/utils/keyboardUtils.ts
@@ -13,9 +13,6 @@ export const isHomeOrEndKeys = (key: string): boolean => key === 'Home' || key =
 export const isPageKeys = (key: string): boolean => key.indexOf('Page') === 0;
 export const isDeleteKeys = (key: string) => key === 'Delete' || key === 'Backspace';

-const printableCharRegex = /^(\p{L}|\p{M}\p{L}|\p{M}|\p{N}|\p{Z}|\p{S}|\p{P})$/iu;
-export const isPrintableKey = (key: string) => printableCharRegex.test(key);
-
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
@@ -23,8 +20,10 @@ export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 export const isMultipleKey = (key: string): boolean =>
   GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;

+// Non printable keys have a name, e.g. "ArrowRight", see the whole list:
+// https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 export const isCellEnterEditModeKeys = (key: string): boolean =>
-  isEnterKey(key) || isDeleteKeys(key) || isPrintableKey(key);
+  isEnterKey(key) || isDeleteKeys(key) || key.length === 1;

 export const isCellExitEditModeKeys = (key: string): boolean =>
   GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;

[oliviertassinari]

Has anyone been able to reproduce this issue? cc @m4theushw @mnajdova @vuduy97. I couldn't.

The issue was opened saying it reproduces with @mui/x-data-grid: 5.9.0, but with the old edit API and the old one, it works for me

• new: https://codesandbox.io/s/basiceditinggrid-demo-mui-x-forked-6zfv1e

Screen.Recording.2022-07-08.at.18.17.35.mov

• old:https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-tg3qp6

I feel that #5414 is only a simplification, but not a bug fix.

[Kohei909Otsuka]

new: https://codesandbox.io/s/basiceditinggrid-demo-mui-x-forked-6zfv1e
old:https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-tg3qp6

hello @oliviertassinari

I see [data grid] Broken "start editing" integration with Japanese still happens in both new and old codesandbox urls you had.

2023-06-05.20.29.08.mov

I'm using Google Japanese Input source(https://www.google.co.jp/ime/)