[data grid] Fix longText expand button submitting surrounding form by siriwatknp · Pull Request #22450 · mui/mui-x

siriwatknp · 2026-05-14T10:58:28Z

Summary

The longText column's expand and collapse buttons are rendered from a styled('button', …) element without a type attribute. Per HTML spec, a <button> inside a <form> defaults to type="submit", so clicking the expand caret submits the parent form.
This commit adds type="button" to both render sites so the buttons stop being implicit submit buttons. event.stopPropagation in the click handler was not enough — it only stops React bubbling, not the browser's native submit triggered by the button's default type.
Adds a regression test that mounts the grid inside a <form> and asserts onSubmit is not fired when the expand button is clicked.

Test plan

pnpm test:unit --project "x-data-grid" --run -t "column type: longText" — all green, including the new should not submit a surrounding form when clicking the expand button case.
pnpm eslint packages/x-data-grid/src/components/cell/GridLongTextCell.tsx packages/x-data-grid/src/tests/cells.DataGrid.test.tsx
pnpm --filter "@mui/x-data-grid" run typescript
Manual reproduction via the StackBlitz from the issue: clicking the expand button no longer submits the surrounding form.

Add type="button" to the longText expand and collapse buttons so clicking them does not trigger submission of an enclosing <form>. Fixes mui#22382

code-infra-dashboard · 2026-05-14T11:02:46Z

Deploy preview

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

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@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%)
@mui/x-license	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

Copilot

Pull request overview

Fixes an HTML default behavior bug in the Data Grid longText cell expand/collapse controls: when rendered inside a <form>, the expand/collapse buttons should not implicitly submit the form.

Changes:

Set type="button" on the longText expand and collapse buttons to prevent implicit form submission.
Add a regression test ensuring clicking the expand button does not trigger a surrounding form’s onSubmit.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/x-data-grid/src/components/cell/GridLongTextCell.tsx	Adds `type="button"` to the expand/collapse button elements used by the `longText` cell UI.
packages/x-data-grid/src/tests/cells.DataGrid.test.tsx	Adds a regression test for form submission behavior when clicking the `longText` expand button.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

LukasTy

Nice fix. 👍

Looks like Claude found more instances of the same bug, WDYT about fixing them?

Code Review: [data grid] Fix longText expand button submitting surrounding form (mui-x#22450)

Summary

Small, correct, well-explained fix. The root cause is accurate: GridLongTextCellCornerButton is styled('button', ...) (packages/x-data-grid/src/components/cell/GridLongTextCell.tsx:72), and per HTML spec a bare <button> inside a <form> defaults to type="submit". event.stopPropagation() in handleExpandClick does not prevent the browser-level submit triggered by the button's default type, so the canonical fix is to set type="button" on both render sites. Both the expand button (line 225) and the in-popper collapse button (line 284) get the attribute, plus a regression test that mounts the grid inside a <form> and asserts onSubmit is not fired.

Correctness

The fix is right on the merits, applied at both call sites, and placed before the {...slotProps?.expandButton} / {...slotProps?.collapseButton} spread so a consumer can still override type explicitly if they really want a submit button via slot props. That ordering matches the rest of the existing prop layout in this file and is consistent between the two sites.

The collapse button fix is also worth keeping (not just defensive): the popper sets container: cellRef.current?.closest('[role="row"]') (line 253), so the popper content is portalled into the row, not to document.body, and therefore stays inside any surrounding <form>. Without type="button" on the collapse button, clicking it would submit too.

Suggestions

Test coverage is asymmetric. The new test only exercises the expand button. Given the collapse button stays inside the form (see the container note above), a parallel assertion would close the loop on the second fix. Something like: open the popup, click the collapse button, assert handleSubmit.callCount is still 0. The existing "should close popup when clicking collapse button" test at packages/x-data-grid/src/tests/cells.DataGrid.test.tsx:300 already shows the pattern for reaching the collapse button. Not blocking.

Out-of-scope but worth filing as a follow-up: the same latent bug exists on other styled('button', ...) components in the codebase that have no explicit type:

packages/x-data-grid-premium/src/components/chartsPanel/chart/GridChartsPanelChart.tsx:54  GridChartTypeButton
packages/x-data-grid-premium/src/components/chartsPanel/GridChartsPanel.tsx:57            GridChartsPanelChartSelection
packages/x-data-grid-premium/src/components/prompt/GridPrompt.tsx:166                    PromptChangesToggle
packages/x-data-grid-premium/src/components/collapsible/CollapsibleTrigger.tsx:26        CollapsibleTriggerRoot

Any of these inside a consumer's <form> will submit it on click. A separate sweep to add type="button" to all of them would prevent the same report from recurring.

What looks good

PR description spells out why event.stopPropagation is the wrong tool here. Useful context for future readers.
The regression test sits in the right describe block, follows the surrounding style (getCell, user.click, button[aria-haspopup="dialog"] selector), and defensively preventDefaults in the submit spy.
Diff is two attribute additions plus one test. No drive-by changes, no scope creep.
Links the originating issue and includes the StackBlitz manual-repro step in the test plan.

Verdict

Approve. Optional: add a symmetric collapse-button assertion to the regression test, and open a follow-up for the other untyped styled('button') declarations in x-data-grid-premium.

…e-button form test

siriwatknp · 2026-05-26T06:39:46Z

@LukasTy I'll separate the fix in another PR for premium, is that okay?

LukasTy

@LukasTy I'll separate the fix in another PR for premium, is that okay?

Oh yeah, that makes sense. 👍
LGTM. 👌

github-actions · 2026-06-08T08:00:32Z

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

…-submit # Conflicts: # packages/x-data-grid/src/tests/cells.DataGrid.test.tsx

[data grid] Fix longText expand button submitting surrounding form

84a8925

Add type="button" to the longText expand and collapse buttons so clicking them does not trigger submission of an enclosing <form>. Fixes mui#22382

siriwatknp mentioned this pull request May 14, 2026

[data grid] Clicking a longText column's expand button triggers a form submission #22382

Closed

LukasTy added type: bug It doesn't behave as expected. scope: data grid Changes related to the data grid. labels May 14, 2026

LukasTy requested a review from Copilot May 14, 2026 12:01

Copilot started reviewing on behalf of LukasTy May 14, 2026 12:02 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

Comment thread packages/x-data-grid/src/tests/cells.DataGrid.test.tsx Outdated

LukasTy reviewed May 14, 2026

View reviewed changes

mj12albert mentioned this pull request May 20, 2026

[datagrid] Pass type="button" to GridLongTextCellCornerButton to avoid triggering form submission #22383

Closed

1 task

[data grid] address review: assert expand button present, add collaps…

31d3e9d

…e-button form test

siriwatknp requested review from LukasTy and mj12albert May 26, 2026 06:32

Merge branch 'master' into fix/longtext-form-submit

b23afa5

siriwatknp mentioned this pull request May 26, 2026

[DataGridPremium] Prevent charts panel buttons from submitting surrounding form #22596

Open

3 tasks

LukasTy approved these changes May 26, 2026

View reviewed changes

[data grid] fix collapse-button form test under jsdom (use fireEvent)

be41a5d

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 8, 2026

siriwatknp enabled auto-merge (squash) June 16, 2026 03:37

Merge remote-tracking branch 'upstream/master' into fix/longtext-form…

3be3141

…-submit # Conflicts: # packages/x-data-grid/src/tests/cells.DataGrid.test.tsx

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 16, 2026

siriwatknp added 2 commits June 17, 2026 16:14

Merge branch 'master' into fix/longtext-form-submit

b625849

Merge branch 'master' into fix/longtext-form-submit

00303bd

siriwatknp merged commit 497cab0 into mui:master Jun 23, 2026
21 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[data grid] Fix longText expand button submitting surrounding form#22450

[data grid] Fix longText expand button submitting surrounding form#22450
siriwatknp merged 7 commits into
mui:masterfrom
siriwatknp:fix/longtext-form-submit

siriwatknp commented May 14, 2026

Uh oh!

code-infra-dashboard Bot commented May 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

LukasTy left a comment

Uh oh!

siriwatknp commented May 26, 2026 •

edited

Loading

Uh oh!

LukasTy left a comment

Uh oh!

github-actions Bot commented Jun 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

siriwatknp commented May 14, 2026

Summary

Test plan

Uh oh!

code-infra-dashboard Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy preview

Bundle size

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

LukasTy left a comment

Choose a reason for hiding this comment

Code Review: [data grid] Fix longText expand button submitting surrounding form (mui-x#22450)

Summary

Correctness

Suggestions

What looks good

Verdict

Uh oh!

siriwatknp commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LukasTy left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

code-infra-dashboard Bot commented May 14, 2026 •

edited

Loading

siriwatknp commented May 26, 2026 •

edited

Loading