mui-nested-menu icon indicating copy to clipboard operation
mui-nested-menu copied to clipboard

Add Example for use with MUI Select

Open mike-iqmo opened this issue 10 months ago • 0 comments

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>
    </>
  );
}

mike-iqmo avatar Apr 04 '24 12:04 mike-iqmo