Display a modal from Material UI dropdown selection - reactjs

Question

The goal is to open a delete option modal from a material ui dropdown menu.
The first step towards that is understanding how to simply select an item from a dropdown, and then trigger some form of action (opening the modal) depending on which item is selected.
The material UI docs all seem to offer samples in which onClick simply handles the closing of the menu. It seems there are rare examples of selecting something from a dropdown and then opening/doing things from there?
I'm having trouble seeing where I would insert the logic/event handling to handle 'if the user selects option x, open modal regarding option x' within the context of a material ui menu.
Here's my code to show the rabbit hole I'm down currently:
import * as React from 'react';
import IconButton from '#mui/material/IconButton';
import Menu from '#mui/material/Menu';
import MenuItem from '#mui/material/MenuItem';
import { useState } from 'react'
import Select from '#mui/material/Select';
interface IProps extends Omit<unknown, 'children'> {
children: any;
options: string[];
}
const ITEM_HEIGHT = 48;
const DropdownMenu = ({ children, options }: IProps) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const [value, setValue] = useState('');
const handleChange = (event: any) => {
setValue(event.target.value);
console.log(value)
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="more"
id="long-button"
aria-controls="long-menu"
aria-expanded={open ? 'true' : undefined}
aria-haspopup="true"
onClick={handleClick}
>
{children}
</IconButton>
<Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button'
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: '20ch'
}
}}
>
<Select value={value} onChange={handleChange}>
{options.map(option => (
<MenuItem key={option} onClick={handleClose} >
{option}
</MenuItem>
))}
</Select>
</Menu>
</div>
);
};
export default DropdownMenu;
How would I use the dropdown to trigger the invocation of a Modal component based on a string value?

Answer 1

If I understand your question right then this should be the solution. simply assign a ref to the triggering element (in this case it's the IconButton). then you can open the menu via setting the open state. BTW why should the button render children?
import * as React from 'react';
import IconButton from '#mui/material/IconButton';
import Menu from '#mui/material/Menu';
import MenuItem from '#mui/material/MenuItem';
import { FC, useState } from 'react';
import Select from '#mui/material/Select';
type DropdownMenuProps = {
options: string[];
};
const ITEM_HEIGHT = 48;
const DropdownMenu: FC<DropdownMenuProps> = ({ children, options }) => {
const anchorEl = React.useRef<null | HTMLButtonElement>(null);
const [open, setOpen] = useState<boolean>(false);
const handleClick: React.MouseEventHandler = () => {
setOpen(true);
};
const [value, setValue] = useState('');
const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
const value = event.target.value;
setValue(value);
if (value === 'the value you want to trigger the menu') {
setOpen(true);
}
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<IconButton
aria-label="more"
id="long-button"
aria-controls="long-menu"
aria-expanded={open ? 'true' : undefined}
aria-haspopup="true"
onClick={handleClick}>
{children}
</IconButton>
<Menu
id="long-menu"
MenuListProps={{
'aria-labelledby': 'long-button',
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: '20ch',
},
}}>
<Select value={value} onChange={handleChange}>
{options.map((option) => (
<MenuItem key={option} onClick={handleClose}>
{option}
</MenuItem>
))}
</Select>
</Menu>
</div>
);
};
export default DropdownMenu;