[DataGrid] Fix copy paste cells with localization keyboard #14220
Conversation
Signed-off-by: Michel Engelen <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
Signed-off-by: Gene Arch <[email protected]> Co-authored-by: Rom Grk <[email protected]>
|
Deploy preview: https://deploy-preview-14220--material-ui-x.netlify.app/ |
rotembarsela
changed the title
zannager
added
the
component: data grid
| @@ -57,11 +57,23 @@ export const isHideMenuKey = (key: React.KeyboardEvent['key']) => isTabKey(key) | |||
| export function isPasteShortcut(event: React.KeyboardEvent) { | |||
| if ( | |||
| (event.ctrlKey || event.metaKey) && | |||
| event.key.toLowerCase() === 'v' && | |||
| event.code === 'KeyV' && | |||
There was a problem hiding this comment.
This can't work, e.g. event.code assumes a QWERTY keyboard layout which would be wrong with a Dvorak keyboard. We faced this in https://github.com/mui/mui-x/pull/3660/files#r793084149.
This property is useful when you want to handle keys based on their physical positions on the input device rather than the characters associated with those keys
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
I can reproduce the bug on macOS with:
It seems that I broke it with https://github.com/mui/mui-x/pull/9220/files#r1216831312, and that we can only event.keyCode use to detect the shortcut correctly. String.fromCharCode(event.keyCode) is the same but with a nicer DX. https://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript seems to confirm it.
| event.code === 'KeyV' && | |
| String.fromCharCode(event.keyCode) === 'V' && |
packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts
Outdated
Show resolved
Hide resolved
Signed-off-by: Olivier Tassinari <[email protected]>
oliviertassinari
changed the title
…copy-paste-cols
…arsela/mui-x into clipboard-copy-paste-cols
packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationInterfaces.ts
Outdated
Show resolved
Hide resolved
…idAggregationInterfaces.ts Signed-off-by: Olivier Tassinari <[email protected]>
Signed-off-by: Olivier Tassinari <[email protected]>
Signed-off-by: Olivier Tassinari <[email protected]>
Signed-off-by: Olivier Tassinari <[email protected]>
Signed-off-by: Olivier Tassinari <[email protected]>
oliviertassinari
changed the title
|
I have added some comments to help in the future, we have had so many iterations of this logic, so to make sure we build up. This looks good 👍, I have unsubscribed to notifications. For those curious about pushing it even further: w3c/uievents#377. |
|
The date picker has the same problem: |
|
…copy-paste-cols
…arsela/mui-x into clipboard-copy-paste-cols
Closes #14219