mui-nested-menu
mui-nested-menu copied to clipboard
Add Example for use with MUI Select
I wanted to use this library within an MUI Select, I couldn't find any documentation around this. I came up with the solution below, it may be nice to add this, or something similar to the documentation.
function NestedSelect({
menuItems,
selectedValue,
selectedLabel,
label,
sx,
}: {
menuItems: MenuItemData[];
label: string;
selectedValue?: string;
selectedLabel?: string;
sx?: SxProps;
}) {
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
const open = Boolean(anchorEl);
const nestedItems = useMemo(() => {
return nestedMenuItemsFromObject({
menuItemsData: menuItems,
isOpen: open,
handleClose: () => setAnchorEl(null),
});
}, [menuItems, open]);
return (
<>
<Menu anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)}>
{nestedItems}
</Menu>
<TextField
select
value={selectedValue}
label={label}
sx={sx}
SelectProps={{
open: false,
onOpen: (e) => setAnchorEl(e.currentTarget),
}}
>
{selectedValue && (
<MenuItem value={selectedValue}>
{selectedLabel || selectedValue}
</MenuItem>
)}
</TextField>
</>
);
}