Stop inline grid editing when clicking empty grid space#4450
Merged
Conversation
ag-Grid's stopEditingWhenCellsLoseFocus only commits an active cell edit when focus moves to another focusable element. Clicking empty grid space (to the right of the last column or below the last row) keeps focus within the grid, so the editor stayed open. GridLocalModel now attaches a capture-phase mousedown listener to the grid view and commits any active edit when the click lands directly on a structural viewport/container background. It deliberately matches only the background element itself, not descendants, so editor popovers portaled into the grid viewport (e.g. DateEditor's calendar) are not treated as outside clicks.
Browser testing in Toolbox revealed the original selector missed the reported case: when a grid's last column flexes to fill, the row element spans the full viewport width, so the empty area to the right of the last cell is the .ag-row element itself (not the viewport). Added .ag-row to the selector. Verified in Toolbox's inline-editing grid: clicking right of the last column and below the last row both commit the active edit, while the portaled DateEditor calendar and SelectEditor dropdown continue to work (their content is always a descendant, never a direct selector match).
The grid container is our own React element and already takes an onKeyDown prop, so the empty-space mousedown handler can ride the same path - dropping the viewRef-tracking reaction and manual add/removeEventListener. Uses bubble phase (the default React prop), which is sufficient: the handler only needs to act on clicks that reach the container, never to preempt ag-Grid.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #4215.
Clicking empty grid space - to the right of the last column or below the last row - did not end an active inline edit. ag-Grid's
stopEditingWhenCellsLoseFocusonly fires when focus moves to another focusable element, and these clicks keep focus within the grid.The grid container now handles
onMouseDownand commits the active edit when the click lands directly on a structural "empty" element (.ag-body-viewport,.ag-center-cols-viewport,.ag-center-cols-container,.ag-row). Matching the target element itself - not its ancestors - ensures cells and editor popovers portaled into the grid viewport (e.g. theDateEditorcalendar) are never treated as outside clicks.Verified in Toolbox's inline-editing grid:
DateEditorcalendar andSelectEditordropdown continue to work normally.