Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[data grid] Setting onValueChange on GridEditInputCell breaks input #16754

Open
GregoryMerlet opened this issue Feb 27, 2025 · 3 comments · May be fixed by #16773
Open

[data grid] Setting onValueChange on GridEditInputCell breaks input #16754

GregoryMerlet opened this issue Feb 27, 2025 · 3 comments · May be fixed by #16773
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@GregoryMerlet
Copy link

GregoryMerlet commented Feb 27, 2025 •
edited
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/devbox/pedantic-black-dx2mpl?from-embed=&workspaceId=ws_BDgZ2s1xd5E7qhqEYc2TJs
  2. Try adding a character in the middle of a value in the "description" column

Current behavior

After adding a character in the middle of the input the caret go back to the end of the input

Expected behavior

After adding a character in the middle of the input the caret should stay after the last character added

Context

Trying to apply the second part of this example to a text input.

Your environment

npx @mui/envinfo

Browser used: Google Chrome

  System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 133.0.6943.126
  npmPackages:
    @emotion/react: ^11.11.4 => 11.14.0 
    @emotion/styled: ^11.11.5 => 11.14.0 
    @mui/base:  5.0.0-beta.69 
    @mui/core-downloads-tracker:  6.4.5 
    @mui/icons-material: ^6.4.2 => 6.4.5 
    @mui/lab: ^6.0.0-beta.25 => 6.0.0-beta.28 
    @mui/material: ^6.4.2 => 6.4.5 
    @mui/private-theming:  6.4.3 
    @mui/styled-engine:  6.4.3 
    @mui/styles: ^6.4.2 => 6.4.5 
    @mui/system:  6.4.3 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.3 
    @mui/x-data-grid: ^7.23.6 => 7.27.0 
    @mui/x-data-grid-pro: ^7.23.6 => 7.27.0 
    @mui/x-date-pickers: ^7.4.0 => 7.27.0 
    @mui/x-internals:  7.26.0 
    @mui/x-license: ^7.23.6 => 7.26.0 
    @types/react: ^18.3.18 => 18.3.18 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.4.5 => 5.7.3

Search keywords: onValueChange GridEditInputCell input bug

Order ID: 105274
@GregoryMerlet GregoryMerlet added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 27, 2025
@github-actions github-actions bot added component: data grid This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ labels Feb 27, 2025
@nusr
Copy link
Contributor

nusr commented Feb 28, 2025

It is recommended that modifying the CustomDescriptionEditComponent might be a way to solve this problem

function CustomDescriptionEditComponent(props: GridEditInputCellProps) {
 return <GridEditInputCell {...props} />;
}

@GregoryMerlet
Copy link
Author

Yes, but then I lose the ability to listen to the changes of this field

@michelengelen
Copy link
Member

I can confirm that this is a small bug in the onChange handler of the GridEditInputCell component. This diff will fix it:

--- a/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridEditInputCell.tsx
@@ -89,10 +89,6 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
     async (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value;

-      if (onValueChange) {
-        await onValueChange(event, newValue);
-      }
-
       const column = apiRef.current.getColumn(field);

       let parsedValue = newValue;
@@ -105,6 +101,10 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
         { id, field, value: parsedValue, debounceMs, unstable_skipValueParser: true },
         event,
       );
+
+      if (onValueChange) {
+        await onValueChange(event, newValue);
+      }
     },
     [apiRef, debounceMs, field, id, onValueChange],
   );

Since this is a pretty small change I will open this up as a 'good first issue'! 👍🏼

Thanks for raising this @GregoryMerlet 🙏🏼

@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 28, 2025
@github-project-automation github-project-automation bot moved this to 🆕 Needs refinement in MUI X Data Grid Feb 28, 2025
@michelengelen michelengelen added the good first issue Great for first contributions. Enable to learn the contribution process. label Feb 28, 2025
@michelengelen michelengelen changed the title Setting onValueChange on GridEditInputCell break input [data grid] Setting onValueChange on GridEditInputCell breaks input Feb 28, 2025
@nusr nusr linked a pull request Mar 1, 2025 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/
Projects
MUI X Data Grid
Status: 🆕 Needs refinement
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[DataGrid] fix: GridEditInputCell break input nusr/mui-x
3 participants
@GregoryMerlet @nusr @michelengelen