[data grid] Trigger preProcessEditCellProps from view by e.g onKeyDown / similar to e.g paste from clipboard (for date fields)

[atsoy]

The problem in depth

Description

We use preProcessEditCellProps for validating entries in cells (mostly in editMode === "row").

In some use cases we need to validate date fields (e.g if the value is after provided date or null is not allowed). It works also almost out of the box, by using GridDataEditCell with a custom Tooltip, but only, if the values was set over built-in Date picker.

Is there a way to trigger / start validation (aka preProcessEditCellProps) by e.g entering the edit mode? Some use cases:

• selecting the cell and pressing Backspace (or starting to type date eg. "202310" to remove the value should trigger validation
• selecting the cell and pasting from clipboard the value (e.g "2023-10-30"), should also trigger validation process

Snippet examples

const preProcessEditCellProps = (props: GridPreProcessEditCellProps) => {
  let error;
  let errorText = '';

  const { value } = params.props;

  if (compareDate) {
    if (!value) {
      error = true;
      errorText = "this field is required";
    }
    if (value && !isAfter(new Date(value), compareDate)) {
      error = true;
      errorText = 'The date should be after ${compareDate}'; // left formatiing code here
    }
  }

  return { ...params.props, error, errorText };
}

...
const columns = [
 {
      field: 'compareDate',
      type: 'date',
      editable: true,
      headerName: 'Compare date,
      disableColumnMenu: true,
      flex: 2,
      renderEditCell: renderDateCell, // basically the GridEditDateCell with a tooltip
      valueFormatter: gridBasicDateFormatter,
      preProcessEditCellProps: (params: GridPreProcessEditCellProps) => {
        return preProcessVersionVonAvailable(params, compareDate);
      }
    },
...
}

....

<DataGridPro
  columns={columns}
  ...
/>

P.S: I've also noticed that validation is being triggered, ONLY when the full date was entered (via keyboard or selected from the date picker). Is it possible to adjust this behaviour and run it e.g for not fully entered date (via keyboard)?

Look forward to hearing from you!

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: preProcessEditCellProps validation Date clipboard
Order ID: 62555

[KenanYusuf]

@atsoy please could you provide a minimal reproduction of the issue?

[atsoy]

Sorry for delayed response @KenanYusuf . Here is Demo

Hope it helps

[KenanYusuf]

Thanks for the reproduction @atsoy.

Makes sense to me that backspace and pasting would trigger the validation logic on any field. You could potentially call preProcessEditCellProps manually to work around it. Would something like this work for your case?

const handleKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => {
  if (event.key === 'Backspace' && params.colDef.preProcessEditCellProps) {
    params.colDef.preProcessEditCellProps({
      // params
    });
  }
};

<DataGrid onCellKeyDown={handleKeyDown} />

@mui/xgrid should we have this behaviour by default?

[atsoy]

Thanks for the provided workaround idea, @KenanYusuf . I've extended the Demo.

And it looks like the Validation is being triggered manually, but e.g error and errorText are remaining false & undefined. Which of course doesn't display the desired Tooltip.

Did I miss something?

[arminmeh]

@KenanYusuf

Makes sense to me that backspace and pasting would trigger the validation logic on any field.

Totally agree. Validation should happen on value change regardless how it happened

[KenanYusuf]

@atsoy it doesn't behave how I expected, sorry about that. I'm working on a fix but will let you know if I think of any other workarounds in the meantime

[cherniavskii]

backspace and pasting would trigger the validation logic on any field.

For clipboard pasting, I didn't use the preProcessEditCellProps because the cells do not enter edit mode, so it's not clear what should happen if validation fails in this case 🤔 Should cells/rows enter the edit mode if validation fails? Or something else?

[KenanYusuf]

Should cells/rows enter the edit mode if validation fails

This seems like a good option.

[atsoy]

@atsoy it doesn't behave how I expected, sorry about that. I'm working on a fix but will let you know if I think of any other workarounds in the meantime

thank you @KenanYusuf !

[atsoy]

backspace and pasting would trigger the validation logic on any field.

For clipboard pasting, I didn't use the preProcessEditCellProps because the cells do not enter edit mode, so it's not clear what should happen if validation fails in this case 🤔 Should cells/rows enter the edit mode if validation fails? Or something else?

hi @cherniavskii , might be just my expectation, but as an user I would expect edit mode, as soon as the displayed values was modified (by starting to type on keyboard, copy/paste, backspace etc). Corresponding it would also validate the input onChange. But as I've said, it might be just matter of perspective.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@atsoy How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.