Skip to content

[DataGridPremium] Drag fill#21717

Open
MBilalShafi wants to merge 6 commits intomui:masterfrom
MBilalShafi:feat/fill-handle
Open

[DataGridPremium] Drag fill#21717
MBilalShafi wants to merge 6 commits intomui:masterfrom
MBilalShafi:feat/fill-handle

Conversation

@MBilalShafi
Copy link
Member

@MBilalShafi MBilalShafi commented Mar 12, 2026

Resolves #5380 (Deploy Preview)

Summary

  • Add a new cellSelectionFillHandle prop to DataGridPremium that renders a small drag handle at the bottom-right corner of the cell selection, enabling Excel-like drag-to-fill behavior (vertical and horizontal)
  • Add Ctrl+D (fill down) and Ctrl+R (fill right) keyboard shortcuts for quickly copying cell values into adjacent cells, supporting both single-cell and multi-cell selections
  • Refactor cell selection range borders to use CSS custom properties with box-shadow instead of standard borders, avoiding layout shift

Changes

New feature: Fill handle (cellSelectionFillHandle prop)

  • Renders a circular handle on the bottom-right cell of the selection when at least one selected column is editable
  • Supports both vertical (drag up/down) and horizontal (drag left/right) fill directions
  • Shows a dashed border preview on target cells while dragging
  • Applies values using processRowUpdate and the existing CellValueUpdater from the clipboard import
  • Pattern-repeats source values when dragging past the source range size
  • RTL support: https://stackblitz.com/edit/zaytnbhq

New keyboard shortcuts

Inspired by Excel, these shortcuts, although conflicting with some other shortcuts, make sense in the context.

  • Ctrl+D: Fills the value from the top cell(s) down into cells below. Works across multiple columns simultaneously, skipping non-editable columns
  • Ctrl+R: Fills the value from the leftmost cell(s) right into adjacent cells. Works across multiple rows simultaneously

New CSS classes

  • cell--withFillHandle — cell displaying the fill handle dot
  • cell--fillPreview, cell--fillPreviewTop/Bottom/Left/Right — dashed border preview during drag

@MBilalShafi MBilalShafi self-assigned this Mar 12, 2026
@MBilalShafi MBilalShafi added scope: data grid Changes related to the data grid. plan: Premium Impact at least one Premium user. feature: Editing Related to the data grid Editing feature feature: Clipboard Related to clipboard copy or paste functionalities new feature type: new feature Expand the scope of the product to solve a new problem. and removed new feature labels Mar 12, 2026
@mui-bot
Copy link

mui-bot commented Mar 12, 2026

Deploy preview: https://deploy-preview-21717--material-ui-x.netlify.app/

Updated pages:

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+1.65KB(+0.40%) 🔺+331B(+0.27%)
@mui/x-data-grid-pro 🔺+1.65KB(+0.32%) 🔺+340B(+0.22%)
@mui/x-data-grid-premium 🔺+14.8KB(+2.19%) 🔺+3.68KB(+1.82%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against f58ffa4

@MBilalShafi MBilalShafi requested review from a team March 16, 2026 03:52
@MBilalShafi MBilalShafi marked this pull request as ready for review March 16, 2026 03:52
@github-actions
Copy link
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 16, 2026
return;
}

event.preventDefault();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

event.preventDefault() called before empty-selection guard

  • In both handleFillKeyDown and handleFillRightKeyDown, event.preventDefault() is called immediately after detecting the shortcut, before getSelectedCellsAsArray() and the selectedCells.length === 0 early return
  • This suppresses browser defaults (bookmark / reload) even when no cells are selected and no fill occurs
  • Fix: Move event.preventDefault() after the selected-cells check

Repro: when the checkbox cell has focus, I would expect cmd+R to work normally (reload the page)

Image

}, [apiRef, clearFillPreviewClasses]);

// Fill handle: mousedown on the fill handle
const handleFillHandleMouseDown = React.useCallback<GridEventListener<'cellMouseDown'>>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Repro-ed in the deploy preview - have a multi-selection of cells, click the fill handle once, the selection is lost

Clicking fill handle without dragging destroys multi-cell selection

  • When a user clicks the fill handle dot and releases without moving (a common accidental interaction):
    1. handleFillHandleMouseDown fires, sets defaultMuiPrevented = true on the mousedown event
    2. On mouseup, applyFill() is a no-op (no targets), cleanupFillDrag() resets state
    3. The browser fires a separate click event — publishEvent('cellClick') resets defaultMuiPrevented = false on this new event
    4. handleCellClick runs and calls setCellSelectionModel({ [id]: { [field]: true } }), replacing the multi-cell selection with a single cell
  • Fix: Add a ref like skipNextClick that the mousedown handler sets and the click handler checks/clears

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature: Clipboard Related to clipboard copy or paste functionalities feature: Editing Related to the data grid Editing feature plan: Premium Impact at least one Premium user. PR: out-of-date The pull request has merge conflicts and can't be merged. scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[data grid] Autofill feature

3 participants