[data grid] Fix Demo CustomColumnMenuGrid crashing#22897
Conversation
sai6855
added
type: bug
Deploy previewhttps://deploy-preview-22897--material-ui-x.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
There was a problem hiding this comment.
Pull request overview
Fixes the Data Grid docs demo CustomColumnMenuGrid crashing when opening the column menu (issue #22887) by updating the custom menu layout to use MUI menu list primitives instead of generic layout components.
Changes:
- Replace
Stackwrappers withMenuListin the custom column menu demo layout. - Apply the same structural update to both the TypeScript demo source and its transpiled JavaScript counterpart.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx | Switches the custom column menu demo sections from Stack to MenuList. |
| docs/data/data-grid/column-menu/CustomColumnMenuGrid.js | Mirrors the demo change in the transpiled JS file (should be regenerated from TSX). |
Comments suppressed due to low confidence (1)
docs/data/data-grid/column-menu/CustomColumnMenuGrid.tsx:15
MenuListrenders a<ul>, so placing a MUIButton(renders a<button>) directly inside it produces invalid markup (ul > button) and breaks expected menu semantics. Convert the close action to aMenuItem(which renders a<li role="menuitem">) so it is a valid child ofMenuList.
import MenuList from '@mui/material/MenuList';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
function MenuCloseComponent(props: GridColumnMenuItemProps) {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } from '@mui/x-data-grid'; | ||
| import { useDemoData } from '@mui/x-data-grid-generator'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import MenuList from '@mui/material/MenuList'; |
There was a problem hiding this comment.
@sai6855 did you run the docs generator script? If yes we can simply ignore this comment.
There was a problem hiding this comment.
Yes. Or else I guess CI would flag it
| } from '@mui/x-data-grid'; | ||
| import { useDemoData } from '@mui/x-data-grid-generator'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import MenuList from '@mui/material/MenuList'; |
There was a problem hiding this comment.
@sai6855 did you run the docs generator script? If yes we can simply ignore this comment.
closes #22887