Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

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.

Written by the indexing model from the issue text.

Description

Status: Unconfirmed

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);
}}
  1. 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.
Dominant language
TypeScript
Stars
7.7k
Forks
2.2k
Avg merge
11h 29m
Merged PRs (30d)
23

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Comcast/react-data-grid

All issues in Comcast/react-data-grid

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.