onBlur in EditCell is not fired after implementing mouse down event to select cell

[naoki-tateyama]

Describe the bug

After commit 7b8a205 (introduced in PR #3774), onBlur in EditCell no longer fires if the user finishes editing by clicking on another cell.

To Reproduce

1. In src/editors/textEditor.ts, add console.log('onBlur') in onBlur.

onBlur={() => {
  console.log('onBlur');
  onClose(true, false);
}}

2. Start the dev server, open the AllFeatures example, double-click any First name cell to enter edit mode, then click a different cell.

Expected behavior

'onBlur' should be printed in the console.

Link to Minimal Reproducible Example

Environment

• react-data-grid version: beta.55
• react/react-dom version:

Additional context

https://github.com/adazzle/react-data-grid/pull/3774 changed the way to capture the selecting cell. After this PR, the onBlur is not called anymore.

1. The mouse down event in another cell is called to change the selectedPosition.
2. getCellEditor in DataGrid returns undefined because of selectedPosition.mode === 'SELECT'. This early return causes unmount of EditCell before onBlur.

[amanmahajan7]

What is blur event used for?

[naoki-tateyama]

In my use case, the edited value is submitted to the server with onBlur event. This can be partially achieved with some key board events like Enter, Tab, and Escape. But clicking another cell event cannot be detected by the edit cell.

[suuf]

Could the onRowsChange property of the DataGrid itself be a workaround for your case? [Docs]

[kuoruan]

In my case, I use a input number component in EditCell, the user may input chars other than numbers. I do validate and emit change on onBlur event. but the event not fire at all.

[johnhkelley1]

@kuoruan @naoki-tateyama did you find a solution for this? I'm facing the same issue

[kuoruan]

@johnhkelley1 try this #3843