mui-x
mui-x copied to clipboard
[data grid] Unable to Paste Row Data in Data Grid with CAPS Lock Key Enabled
Steps to reproduce
Link to live example: https://mui.com/x/react-data-grid/clipboard/
Steps:
- Go to the Clipboard paste section
- Copy several columns of data from a spreadsheet (e.g., Excel)
- Enable the CAPS lock key
- Click on the first cell
- Attempt to paste data using CTRL + V
Current behavior
When attempting to paste a row of data with CTRL + V while the CAPS lock key is enabled, nothing will happen. However, if you disable the CAPS lock key, the data will be pasted as expected.
Expected behavior
Row data should be successfully pasted regardless of the status of the CAPS lock key
Context
Trying to allow users to paste rows of data from Excel to a data grid for uploading
Your environment
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Version 120.0.6099.225 (Official Build) (64-bit)
Edge: Version 120.0.2210.144 (Official build) (64-bit)
npmPackages:
@emotion/react: ^11.11.0 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.9
@mui/core-downloads-tracker: 5.14.3
@mui/icons-material: ^5.8.4 => 5.8.4
@mui/material: ^5.12.3 => 5.14.3
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/styles: ^5.9.3 => 5.9.3
@mui/system: 5.14.3
@mui/types: 7.2.4
@mui/utils: 5.14.3
@mui/x-data-grid: ^6.3.1 => 6.18.6
@mui/x-data-grid-premium: ^6.10.2 => 6.18.6
@mui/x-data-grid-pro: 6.18.6
@mui/x-date-pickers: ^6.2.1 => 6.2.1
@mui/x-license-pro: 6.10.2
@types/react: 18.0.13 => 18.0.13
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: ~4.7.2 => 4.7.4
Search keywords: caps lock, data grid, past
@michelengelen we would like to pick this up
@michelengelen I would like to pick up this issue.
after initial checking I found out when caps lock is on CTRL + v becomes CTRL + V
So this
https://github.com/mui/mui-x/blob/e3042668d82443bcad0f68e513965d06b2a36c2e/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts#L307
code will not work as it checking for lowercase v only
corrected version of code will be
const isPasteShortcut = (event: React.KeyboardEvent) => {
return (
(event.ctrlKey || event.metaKey) &&
(event.key.toLowerCase() === 'v' || event.code.toLowerCase() === 'keyv')
);
};
If you can assign this to me
@shaharyar-shamshi You can open a PR with the fix. I would avoid event.code
, according to the spec .code
represents a physical key, which might not match with the logical key for unusual keyboard layouts.
@shaharyar-shamshi You can open a PR with the fix. I would avoid
event.code
, according to the spec.code
represents a physical key, which might not match with the logical key for unusual keyboard layouts.
Yes I agree but it is in or condition to be on safer side I included it.
But it would be incorrect. E.g. in dvorak layout, the physical V key corresponds to the logical X symbol. So a dvorak user pressing Ctrl + X
(in their layout) might have the event.code
as KeyV
.