[question] [maybe bug] single digit number wrongly typed as string even if column type is number

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

4.15k stars 1.3k forks source link

Order ID or Support key 💳 (optional)

68257

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

The problem in depth 🔍

https://codesandbox.io/s/currying-night-xpfv64?file=/demo.tsx

const columns = [
  {
    field: "userName",
    type: "string",
    editable: true
  },
  {
    field: "age",
    type: "number",
    editable: true
  }
];

even if "age" column is typed as "number", when I type with keyboard only "1" or "2" or something single degit number.("10" or "11" is fine) MUI X Grid takes it as "string" wrongly.

How can I get number As it it's expected.

https://github.com/mui/mui-x/assets/11783802/1768d73f-af6f-46f1-8078-dff94acc5c23

Your environment 🌎

System: OS: macOS 12.4 Binaries: Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node Yarn: Not Found npm: 9.6.7 - ~/develop/nitoel/tenant/supplier-frontend/node_modules/.bin/npm Browsers: Chrome: 114.0.5735.106 Edge: Not Found Firefox: Not Found Safari: 15.5 npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: ^11.10.4 => 11.10.4 @mui/core-downloads-tracker: 5.10.13 @mui/icons-material: ^5.10.9 => 5.10.9 @mui/material: ^5.10.13 => 5.10.13 @mui/styled-engine: 5.13.2 @mui/system: 5.13.2 @mui/utils: 5.13.1 @mui/x-data-grid: 6.6.0 @mui/x-data-grid-premium: ^6.6.0 => 6.6.0 @mui/x-data-grid-pro: 6.6.0 @mui/x-license-pro: 6.6.0 @types/react: 18.0.14 => 18.0.14 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.7.4 => 4.7.4

Thanks for identifying the issue, this indeed seems like a bug. Happens only when the cell edit is started by pressing a printable key.

What happens is, when a printable key is pressed, it's read in the handleCellKeyDown event handler, and event.key (type string) is passed all the way down to the GridEditInputCell as an initialValue. Now for this value GridEditInputCell doesn't call the onChange handler and the value is stored as a string even though the colDef.type is number.

I raised a PR which should fix it, not sure if it's the best of the solutions, but I tried to cast the value to number before passing it down to the underlying handlers if the column is of type number.

It also fixed single-digit non-numeric values from being set as a value for numeric columns.

You can observe the updated behavior on this codesandbox: https://codesandbox.io/s/nervous-stitch-yj3h6l?file=/demo.tsx

mui / mui-x