Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Sep 10, 2025

When data grid rows are wrapped in anchor elements, clicking action buttons would bubble up to the anchor and trigger unintended navigation. This PR adds event propagation prevention to all action button click handlers.

Changes Made

GridActionsCell.tsx

Added event.stopPropagation() and event.preventDefault() to the handleButtonClick function to prevent action button clicks from bubbling up to parent elements.

GridActionsCellItem.tsx

Added event.stopPropagation() and event.preventDefault() to both handleClick functions:

  • For regular action buttons (not in menu)
  • For action buttons displayed within menus

Example Scenario

// Before: Clicking "Edit" would navigate to the row link
<a href="/user/123">
  <DataGrid 
    rows={rows}
    columns={[
      {
        field: 'actions',
        type: 'actions',
        getActions: () => [
          <GridActionsCellItem icon={<EditIcon />} label="Edit" onClick={handleEdit} />
        ]
      }
    ]}
  />
</a>

// After: Clicking "Edit" only triggers handleEdit, no navigation occurs

This ensures that action buttons work independently of any parent clickable elements while maintaining normal row click behavior for non-action areas.

Fixes #19432.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copy link
Contributor Author

Copilot AI commented Sep 10, 2025

@michelengelen 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

@mui-bot
Copy link

mui-bot commented Sep 10, 2025

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

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 🔺+117B(+0.03%) 🔺+29B(+0.02%)
@mui/x-data-grid-pro 🔺+117B(+0.02%) 🔺+31B(+0.02%)
@mui/x-data-grid-premium 🔺+117B(+0.02%) 🔺+28B(+0.01%)
@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 a8d221e

Co-authored-by: michelengelen <32863416+michelengelen@users.noreply.github.com>
Copilot AI changed the title [WIP] [data grid] Stop event propagation on data grid action buttons (GridActionsCellItem) [data grid] Stop event propagation on data grid action buttons (GridActionsCellItem) Sep 10, 2025
Copilot AI requested a review from michelengelen September 10, 2025 08:54
@michelengelen michelengelen added type: bug It doesn't behave as expected. scope: data grid Changes related to the data grid. labels Sep 11, 2025
@michelengelen michelengelen marked this pull request as ready for review September 11, 2025 06:23
@michelengelen michelengelen enabled auto-merge (squash) September 11, 2025 06:23
@github-actions
Copy link

This pull request has been inactive for 30 days. Please remove the stale label or leave a comment to keep it open. Otherwise, it will be closed in 15 days.

@github-actions github-actions bot added the stale Inactive for 7 days (issues) or 30 days (PRs); closed after 5 or 15 more days if no update. label Oct 17, 2025
@github-actions
Copy link

github-actions bot commented Nov 2, 2025

This pull request has been closed due to 15 days of inactivity after being marked stale.

@github-actions github-actions bot closed this Nov 2, 2025
auto-merge was automatically disabled November 2, 2025 03:28

Pull request was closed

@michelengelen michelengelen reopened this Nov 3, 2025
@michelengelen michelengelen merged commit 42ef66c into master Nov 3, 2025
6 of 19 checks passed
@michelengelen michelengelen deleted the copilot/fix-19432 branch November 3, 2025 11:34
bernardobelchior pushed a commit to bernardobelchior/mui-x that referenced this pull request Nov 3, 2025
…ctionsCellItem) (mui#19513)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: michelengelen <32863416+michelengelen@users.noreply.github.com>
arminmeh added a commit to arminmeh/mui-x that referenced this pull request Nov 10, 2025
mapache-salvaje pushed a commit to mapache-salvaje/mui-x that referenced this pull request Dec 29, 2025
…ctionsCellItem) (mui#19513)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: michelengelen <32863416+michelengelen@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: data grid Changes related to the data grid. stale Inactive for 7 days (issues) or 30 days (PRs); closed after 5 or 15 more days if no update. type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[data grid] Stop event propagation on data grid action buttons (GridActionsCellItem)

4 participants