[data grid] Unable to Paste Row Data in Data Grid with CAPS Lock Key Enabled

[dmarciano]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/clipboard/

Steps:

1. Go to the Clipboard paste section
2. Copy several columns of data from a spreadsheet (e.g., Excel)
3. Enable the CAPS lock key
4. Click on the first cell
5. 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

[gitstart]

@michelengelen we would like to pick this up

[shaharyar-shamshi]

@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

mui-x/packages/grid/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts

Line 307 in e304266

function isPasteShortcut(event: React.KeyboardEvent) {

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

[romgrk]

@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]

@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.

[romgrk]

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.