Comcast / Comcast/react-data-grid

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

Aperta
#3,797 6 commenti 1 reazione 0 assegnatari Vedi su GitHub
Status: Unconfirmed
Lingua principale
TypeScript
Stelle
7.7k
Fork
2.2k
Merge medio
1g 2h
PR unite (30g)
33

Descrizione

## 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.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Start with src/editors/textEditor.ts and the DataGrid getCellEditor path described in the issue, then run the dev server and reproduce the behavior in the AllFeatures example. Check the interaction between the mouse-down cell selection and EditCell unmounting; done means clicking another cell after editing prints “onBlur” in the console.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.