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

vuduy97 commented 2 years ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] 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

https://user-images.githubusercontent.com/72425044/165739433-82a47833-cb41-4960-afbd-31bcdcefb93f.mp4

Expected behavior 🤔

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

https://user-images.githubusercontent.com/72425044/165739663-25463ae0-5824-48b5-b10c-cfc21bada40f.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 commented 2 years ago

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

https://github.com/mui/mui-x/blob/90c39888dcefb667e4f0836cdbeda76c42a827f1/packages/grid/x-data-grid/src/utils/keyboardUtils.ts#L16-L17

oliviertassinari commented 2 years ago

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

workoocha commented 2 years ago

👍🏼

oliviertassinari commented 2 years ago

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 commented 1 year ago

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