Comcast / Comcast/react-data-grid

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

Open
#3,797 6 comments 1 reaction 0 assignees View on GitHub
Status: Unconfirmed
Dominant language
TypeScript
Stars
7.7k
Forks
2.2k
Avg merge
1d 2h
Merged PRs (30d)
33

Description

## Describe the bug
After commit [7b8a205](https://github.com/adazzle/react-data-grid/commit/7b8a2056f7ac2425ea701f63a784ced163e605c3) (introduced in PR [#3774](https://github.com/adazzle/react-data-grid/pull/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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.