Skip to content

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

Description

@flvinny

Steps to reproduce

Steps:

  1. Open this link to live example: https://stackblitz.com/edit/5vsfaz2j?file=src%2FDemo.tsx
  2. Expand any of the cells under the column called "bio"
    • A dialog should pop up, indicating that the form was submitted

Current behavior

The expand button on the longText column submits the parent form.

Expected behavior

The expand button should not affect any form encapsulating it.

Context

No response

Your environment

npx @mui/envinfo
    OS: Windows 11 10.0.26200
  Binaries:
    Node: 24.3.0 - C:\Users\DSI30\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    npm: 11.4.2 - C:\Users\DSI30\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    @base-ui/utils:  0.2.4 
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.2.0 
    @mui/icons-material: 7.0.2 => 7.0.2 
    @mui/lab: ^7.0.0-beta.14 => 7.0.0-beta.14 
    @mui/material: ^7.2.0 => 7.2.0 
    @mui/private-theming:  7.2.0 
    @mui/styled-engine:  7.2.0 
    @mui/system:  7.2.0 
    @mui/types:  7.4.8 
    @mui/utils:  7.3.5 
    @mui/x-data-grid: ^8.9.1 => 8.28.5 
    @mui/x-data-grid-premium: ^8.27.0 => 8.28.5 
    @mui/x-data-grid-pro:  8.28.5 
    @mui/x-date-pickers: ^8.9.0 => 8.28.5 
    @mui/x-date-pickers-pro: ^8.27.0 => 8.28.5 
    @mui/x-internal-exceljs-fork:  4.4.3 
    @mui/x-internals:  8.26.0 
    @mui/x-license:  8.26.0 
    @mui/x-telemetry:  8.20.0 
    @mui/x-tree-view: ^8.27.0 => 8.28.5 
    @mui/x-virtualizer:  0.3.4 
    @types/react: 19.1.2 => 19.1.2 
    react: 19.1.0 => 19.1.0 
    react-dom: 19.1.0 => 19.1.0 
    typescript: 5.8.3 => 5.8.3 

Search keywords: longText form submit onSubmit

Order ID: 125366

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: data gridChanges related to the data grid.support: premium standardSupport request from a Premium standard plan user. https://mui.com/legal/technical-support-sla.type: bugIt doesn't behave as expected.
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions