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

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);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    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 new comment implies `muiSkipListHighlight` is needed because ListSubheader isn’t focusable, but also notes ListSubheader already sets this flag by default. The real issue here is that `styled(ListSubheader)` doesn’t keep the static `muiSkipListHighlight` field, so the wrapper must re-declare it. Please reword to make that explicit (and/or set the static field in a separate statement) to avoid confusing readers copying this example.
```suggestion
    // 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.
```

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);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    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