Display a MUI menu

[amikem]

I have created a plugin "MoreActions", that is supposed to display a menu with a list of actions (e.g delete, update, share, etc..).
I am working with React MUI and want to use the Menu component (https://mui.com/material-ui/react-menu/) to display my list of actions. Unfortunatelly the menu is not displayed, but i could see it in the virtual DOM. Any idea?

Here is how the Actions plugin renders.

Here is the code

import { PluginProps } from 'yet-another-react-lightbox/dist/types'
import { addToolbarButton } from 'yet-another-react-lightbox/core'
import PictureActionsButton from './PictureActionsButton'

const PictureActions = ({ augment }: PluginProps) => {
  augment(({ toolbar, ...rest }) => ({
    toolbar: addToolbarButton(toolbar, 'Actions', <PictureActionsButton key='Actions' />),
    ...rest
  }))
}

export default PictureActions

import { useState, MouseEvent } from 'react'

import { useLightboxState } from 'yet-another-react-lightbox/core'

import IconButton from '@mui/material/IconButton'
import DotsVertical from 'mdi-material-ui/DotsVertical'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'

import Tooltip from '@mui/material/Tooltip'
import DeleteOutline from 'mdi-material-ui/DeleteOutline'

const PictureActionsButton = () => {
  const { slides, currentIndex } = useLightboxState()
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const actions = [
    {
      label: 'Delete',
      icon: <DeleteOutline fontSize='small' sx={{ mr: 2 }} />,
      onClick: () => console.log('delete')
    }
  ]

  //const rowOptionsOpen = Boolean(anchorEl)

  const handleRowOptionsClick = (event: MouseEvent<HTMLElement>) => {
    console.log('click icon', currentIndex, event.currentTarget)
    setAnchorEl(event.currentTarget)
  }
  const handleRowOptionsClose = () => {
    setAnchorEl(null)
  }

  const doOnClick = (onClickAction?: () => void) => {
    console.log('clicking doOnclick')
    if (onClickAction) onClickAction()
    handleRowOptionsClose()
  }

  return (
    <>
      <Tooltip title='Actions'>
        <IconButton
          size='small'
          component='a'
          disabled={slides.length === 0}
          sx={{ textDecoration: 'none' }}
          onClick={handleRowOptionsClick}
          style={{ color: 'white' }}
        >
          <DotsVertical />
        </IconButton>
      </Tooltip>

      <Menu keepMounted anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleRowOptionsClose}>
        {actions.map((action, index) => (
          <MenuItem key={index} onClick={() => doOnClick(action.onClick)}>
            {action.icon}
            {action.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  )
}

export default PictureActionsButton`

[igordanchenko]

YARL uses z-index: 9999 by default, so you need to render MUI Menu with higher z-index.

sx={{ zIndex: 10000 }}

[amikem]

Thanks for the quick answer. It works :-)