{"record":{"id":"5e98c21b6f5e00b0","repo":"marmelab/react-admin","slug":"sortbutton-menuitems-should-have-a-data-sort-att","errorCode":null,"errorMessage":"<SortButton> MenuItems should have a data-sort attribute","messagePattern":"<SortButton> MenuItems should have a data-sort attribute","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/button/SortButton.tsx","lineNumber":91,"sourceCode":"    const translateLabel = useTranslateLabel();\n    const isXSmall = useMediaQuery((theme: Theme) =>\n        theme.breakpoints.down('sm')\n    );\n    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setAnchorEl(event.currentTarget);\n    };\n\n    const handleClose = () => {\n        setAnchorEl(null);\n    };\n\n    const handleChangeSort = (\n        event: React.MouseEvent<HTMLLIElement, MouseEvent>\n    ) => {\n        const field = event.currentTarget.dataset.sort;\n        if (!field) {\n            throw new Error(\n                '<SortButton> MenuItems should have a data-sort attribute'\n            );\n        }\n        setSort({\n            field,\n            order: field === sort.field ? inverseOrder(sort.order) : 'ASC',\n        });\n        setAnchorEl(null);\n    };\n\n    const fieldLabel = translateLabel({\n        resource,\n        source: sort.field,\n    });\n    const buttonLabel = translate(label, {\n        field: fieldLabel,\n        field_lower_first:\n            typeof fieldLabel === 'string'","sourceCodeStart":73,"sourceCodeEnd":109,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/button/SortButton.tsx#L73-L109","documentation":"SortButton renders menu items from its `fields` prop and reads a data-sort DOM attribute from the clicked menu item to know which field was chosen. If the clicked item lacks data-sort, the library throws instead of sorting on an unknown field. This usually means a custom MenuItem child was added without the attribute.","triggerScenarios":"Clicking a custom <MenuItem> child inside <SortButton> that does not set data-sort=\"fieldName\"; overriding default menu items with ones missing the attribute.","commonSituations":"Customizing SortButton children to add icons or extra items and forgetting data-sort; passing non-MenuItem children the component wasn't designed for.","solutions":["Add data-sort to every custom MenuItem: <MenuItem data-sort=\"title\">Title</MenuItem>","Only use SortButton's built-in children or keep custom ones compliant","If adding separators/labels, ensure they don't use handleChangeSort (e.g. disable them)"],"exampleFix":"// before\n<MenuItem>Title</MenuItem>\n// after\n<MenuItem data-sort=\"title\">Title</MenuItem>","handlingStrategy":"validation","validationCode":"const items = fields.map(f => ({ field: f, node: <MenuItem key={f} data-sort={f}>{labelFor(f)}</MenuItem> }));\n// assert every custom child has data-sort before rendering\nitems.forEach(i => { if (!i.node.props['data-sort']) throw new Error('MenuItem missing data-sort'); });","typeGuard":"const hasDataSort = (el: React.ReactElement): el is React.ReactElement<{ 'data-sort': string }> =>\n  typeof el.props['data-sort'] === 'string' && el.props['data-sort'].length > 0;","tryCatchPattern":null,"preventionTips":["When customizing SortButton children, always mirror built-in MenuItem props including data-sort","Extend SortButton rather than replacing its children where possible","Add a click test for each custom menu item"],"tags":["react-admin","dom-attribute","sortbutton"],"backgroundTag":"missing-data-attribute","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}