Repository: mui/material-ui
File: docs/data/material/components/menus/GroupedMenu.tsx (TypeScript)

Code before:
import * as React from 'react';
import Button from '@mui/material/Button';
import ListSubheader from '@mui/material/ListSubheader';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { styled } from '@mui/material/styles';

const StyledListHeader = Object.assign(
  styled(ListSubheader)({
    backgroundImage: 'var(--Paper-overlay)',
  }),
  {
    // IMPORTANT: this property is needed to prevent the component from being focused
    // when navigating with the keyboard, as ListSubheader is not a focusable element.
    // For example, ListSubheader has it set to true by default, so does Divider.
    muiSkipListHighlight: true,
  },
);

export default function GroupedMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? 'grouped-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>

Review comment (suggestion):
The added comment is a bit self-contradictory: it says ListSubheader sets `muiSkipListHighlight = true` by default, but doesn’t explain that wrapping it with `styled()` does not preserve that static field. Consider rewording to explicitly state that the styled wrapper needs the flag re-attached (or assign `StyledListHeader.muiSkipListHighlight = true` after creating the styled component) so readers understand why this is necessary.
```suggestion
    // ListSubheader sets muiSkipListHighlight = true by default, but wrapping it with
    // styled() creates a new component that does not inherit that static field, so we
    // must re-attach it here (the same applies to components like Divider).
```

Code after:
import * as React from 'react';
import Button from '@mui/material/Button';
import ListSubheader from '@mui/material/ListSubheader';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { styled } from '@mui/material/styles';

const StyledListHeader = Object.assign(
  styled(ListSubheader)({
    backgroundImage: 'var(--Paper-overlay)',
  }),
  {
    // IMPORTANT: The base ListSubheader component sets `muiSkipListHighlight = true`
    // by default, but wrapping it with `styled(ListSubheader)` does not preserve
    // that static field. We re-declare it here so the menu list continues to skip
    // highlighting this non-focusable subheader when navigating with the keyboard.
    muiSkipListHighlight: true,
  },
);

export default function GroupedMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? 'grouped-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Dashboard