How to set Anchor to Popover in Material-UI - reactjs

I have a Popover in Material-UI from which I want to permanently set the anchor to a button. Not only on click with event.currentTarget.
How can I do this with typescript?
Unfortunately, the current examples in Material-UI use event.currentTarget and with a reference it is not working.
import React,{useRef} from 'react';
import { makeStyles, createStyles, Theme } from '#material-ui/core/styles';
import Popover from '#material-ui/core/Popover';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
typography: {
padding: theme.spacing(2),
},
}),
);
export default function SimplePopover() {
const classes = useStyles();
const ref = useRef(null)
return (
<div>
<Button ref={ref} variant="contained" color="primary">
Open Popover
</Button>
<Popover
open
anchorEl={ref}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>The content of the Popover.</Typography>
</Popover>
</div>
);
}
Here a codesandbox for it.

You must have missed some detail. I followed the Simple Popover example in official docs and it still works.
If you want to use useRef, make sure to refer to buttonRef.current when setting anchorRef
Below is the forked codesandbox:

2 things
you need to store the state of opened popup
open it from the outside
close it from the inside
relevant JS:
import React, { useRef, useState } from "react";
import { makeStyles, createStyles, Theme } from "#material-ui/core/styles";
import Popover from "#material-ui/core/Popover";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
typography: {
padding: theme.spacing(2)
}
})
);
export default function SimplePopover() {
const classes = useStyles();
const ref = useRef(null);
const [popOverVisible, setPopOverVisible] = useState(false);
const togglePopOver = () => {
popOverVisible === false
? setPopOverVisible(true)
: setPopOverVisible(false);
};
return (
<div>
<Button
ref={ref}
variant="contained"
color="primary"
onClick={togglePopOver}
>
Open Popover
</Button>
Status: {popOverVisible.toString()}
<Popover
open={popOverVisible}
anchorEl={ref}
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
transformOrigin={{
vertical: "top",
horizontal: "center"
}}
>
<Button
ref={ref}
variant="contained"
color="primary"
onClick={togglePopOver}
>
CLOSE Popover
</Button>
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
</div>
);
}
EDIT: upon the user's comment below:
<Popover
open={popOverVisible}
anchorEl={ref}
anchorReference="anchorPosition"
anchorPosition={{ top: 50, left: 140 }}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
>
forked sandbox here

Related

Material UI Popover - how to open it without Hooks?

Because of an external library I have to use and I cannot avoid, a re-render of a Component I have is causing this error message:
Error: Rendered more hooks than during the previous render.
I know this is caused because I'm using hooks inside my component. See my component content:
import React, { useState } from 'react';
import Box from '#material-ui/core/Box';
import Popover from '#material-ui/core/Popover';
import ImageCell from 'App/components/DatabaseTable/Utils/ImageCell';
const Image = ({ defaultValueRow, valueRow }) => {
const [anchorEl, setAnchorEl] = useState(null);
const id = `popover-${defaultValueRow[valueRow]}`;
const handlePopoverOpen = (event) => setAnchorEl(event.currentTarget);
const handlePopoverClose = () => setAnchorEl(null);
return (
<>
<Box
aria-haspopup={'true'}
aria-owns={anchorEl ? id : undefined}
onMouseEnter={handlePopoverOpen}
onMouseLeave={handlePopoverClose}
>
<ImageCell src={valueRow[defaultValueRow]} />
</Box>
<Popover
id={id}
style={{ pointerEvents: 'none' }}
PaperProps={{
style: { padding: '8px' },
}}
open={anchorEl}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
>
<ImageCell
style={{ maxWidth: '125rem', maxHeight: '15rem' }}
src={valueRow[defaultValueRow]}
/>
</Popover>
</>
);
};
export default Image;
As I cannot avoid using this external library, I was wondering:
Is there any way to manage anchorEl to not be using the useState hook?

Material-ui.Why Popover set Modal's backdrop invisible

Can't understand why Popover set backdrop invisible by default, and get no way to change it.
Did I miss something important in Material Design?Or can I just create an issue for it?
<Modal
container={container}
open={open}
ref={ref}
BackdropProps={{ invisible: true }}
className={clsx(classes.root, className)}
{...other}
>
https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Popover/Popover.js#L386
You can change it with BackdropProps={{ invisible: false }}. In the code snippet you included from Popover, if BackdropProps has been specified on the Popover it will be part of {...other} and will win over the earlier BackdropProps={{ invisible: true }}.
Here's a working example based on one of the demos:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Popover from "#material-ui/core/Popover";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2)
}
}));
export default function SimplePopover() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Button
aria-describedby={id}
variant="contained"
color="primary"
onClick={handleClick}
>
Open Popover
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
transformOrigin={{
vertical: "top",
horizontal: "center"
}}
BackdropProps={{ invisible: false }}
>
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
</div>
);
}

How do I control the positon of the menu icon on a page using a material-ui menu?

By default the menu icon is appearing on the left of the page, but I need it on the right as shown in the attachment.
I have tried styling the div and the icon element, but no luck. I exhaustively searched the internet and I cannot find and answer. Thanks for helping.
Here's my code.
import React, { useState } from "react";
import { withStyles } from "#material-ui/core/styles";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import KeyboardArrowUpIcon from "#material-ui/icons/KeyboardArrowUp";
import Printer from "../SVG/Printer";
import Download from "../SVG/Download";
import Email from "../SVG/Email";
const StyledMenu = withStyles({
paper: {
border: "1px solid #d3d4d5"
}
})(props => (
<Menu
elevation={0}
getContentAnchorEl={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
transformOrigin={{
vertical: "top",
horizontal: "center"
}}
{...props}
/>
));
const StyledMenuItem = withStyles(theme => ({
root: {
"&:focus": {
backgroundColor: theme.palette.primary.main,
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
color: theme.palette.common.white
}
}
}
}))(MenuItem);
const MyClaimedClassmatesOptionMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleDownload = () => {
alert("You clicked handleDownload");
};
return (
<div>
<KeyboardArrowUpIcon
aria-controls="customized-menu"
aria-haspopup="true"
variant="contained"
color="primary"
onClick={handleClick}
></KeyboardArrowUpIcon>
<StyledMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<StyledMenuItem onClick={handleDownload}>
<ListItemIcon>
<Download />
</ListItemIcon>
<ListItemText primary="Download" />
</StyledMenuItem>
<StyledMenuItem>
<ListItemIcon>
<Printer />
</ListItemIcon>
<ListItemText primary="Print" />
</StyledMenuItem>
<StyledMenuItem>
<ListItemIcon>
<Email />
</ListItemIcon>
<ListItemText primary="Email" />
</StyledMenuItem>
</StyledMenu>
</div>
);
};
export default MyClaimedClassmatesOptionMenu;
simple float-right should do the trick... this would be my response working from the code you provided...
relevant css:
.MuiSvgIcon-colorPrimary { float: right; }
complete working stackblitz here

Convert this Material UI hook api for Popovers to styled component API for Popovers

I've edited my original post, so far I'm able to refactor away from hooks with this implementation, now, the behavior for moving the mouse cursor away does not close the popover. This is what I have so far:
import React, { Fragment, useState } from 'react';
import propTypes from '../../propTypes';
import { Grid, Typography, Box, Popover } from '#material-ui/core';
import { makeStyles, styled } from '#material-ui/core/styles';
import InfoIcon from '#material-ui/icons/InfoOutlined';
import { fade } from '#material-ui/core/styles/colorManipulator';
export const InfoIconWrapper = styled(InfoIcon)(({ theme }) => ({
color: fade(theme.palette.black, 0.3),
}));
export const GridWrapper = styled(Grid)(({theme}) => ({
pointerEvents: 'none',
padding: theme.spacing(1),
}));
const DistributionLinePopover = ({ distributionLine }) => {
const [anchorEl, setAnchorEl] = useState(null);
const handlePopoverOpen = event => {
setAnchorEl(event.currentTarget);
console.log("open")
};
const handlePopoverClose = () => {
setAnchorEl(null);
console.log("close")
};
const open = Boolean(anchorEl);
return (
<Fragment>
<Typography
aria-owns={open ? 'mouse-over-popover' : undefined}
aria-haspopup="true"
onMouseEnter={handlePopoverOpen}
>
<InfoIconWrapper fontSize="small" />
</Typography>
<Popover
id="mouse-over-popover"
open={open}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
onClose={handlePopoverClose}
// onMouseLeave={handlePopoverClose}
disableRestoreFocus
>
<GridWrapper container>
What can I do to have the popover close when the user moves their mouse away from it? onExit, onExited, onExiting does not produce the desired behavior.
You need to use import { withStyles } from '#material-ui/core/styles'
Then, your styles are defined as such:
const styles = theme => ({
...
});
Your className attributes will be className={classes.popover} (or whichever you're using). Note, classes is passed into your component, so you would obtain it from the signature, i.e. function Component({classes}) { ... }
Finally, you export your class as such:
export default withStyles(styles)(Component)
Ok, the solution to the updated post is to replace onClose with onMouseOut.

How to Make Material-UI Menu based on Hover, not Click

I am using Material-UI Menu.
It should work as it was, but just using mouse hover, not click.
Here is my code link: https://codesandbox.io/embed/vn3p5j40m0
Below is the code of what I tried. It opens correctly, but doesn't close when the mouse moves away.
import React from "react";
import Button from "#material-ui/core/Button";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
return (
<div>
<Button
aria-owns={anchorEl ? "simple-menu" : undefined}
aria-haspopup="true"
onClick={handleClick}
onMouseEnter={handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
onMouseLeave={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
export default SimpleMenu;
The code below seems to work reasonably. The main changes compared to your sandbox are to use onMouseOver={handleClick} instead of onMouseEnter on the button. Without this change, it doesn't open reliably if the mouse isn't over where part of the menu will be. The other change is to use MenuListProps={{ onMouseLeave: handleClose }}. Using onMouseLeave directly on Menu doesn't work because the Menu includes an overlay as part of the Menu leveraging Modal and the mouse never "leaves" the overlay. MenuList is the portion of Menu that displays the menu items.
import React from "react";
import Button from "#material-ui/core/Button";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
if (anchorEl !== event.currentTarget) {
setAnchorEl(event.currentTarget);
}
}
function handleClose() {
setAnchorEl(null);
}
return (
<div>
<Button
aria-owns={anchorEl ? "simple-menu" : undefined}
aria-haspopup="true"
onClick={handleClick}
onMouseOver={handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
MenuListProps={{ onMouseLeave: handleClose }}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
export default SimpleMenu;
I've updated Ryan's original answer to fix the issue where it doesn't close when you move the mouse off the element to the side.
How it works is to disable the pointerEvents on the MUI backdrop so you can continue to detect the hover behind it (and re-enables it again inside the menu container). This means we can add a leave event listener to the button as well.
It then keeps track of if you've hovered over either the button or menu using currentlyHovering.
When you hover over the button it shows the menu, then when you leave it starts a 50ms timeout to close it, but if we hover over the button or menu again in that time it will reset currentlyHovering and keep it open.
I've also added these lines so the menu opens below the button:
getContentAnchorEl={null}
anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
import React from "react";
import Button from "#material-ui/core/Button";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
import makeStyles from "#material-ui/styles/makeStyles";
const useStyles = makeStyles({
popOverRoot: {
pointerEvents: "none"
}
});
function SimpleMenu() {
let currentlyHovering = false;
const styles = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
if (anchorEl !== event.currentTarget) {
setAnchorEl(event.currentTarget);
}
}
function handleHover() {
currentlyHovering = true;
}
function handleClose() {
setAnchorEl(null);
}
function handleCloseHover() {
currentlyHovering = false;
setTimeout(() => {
if (!currentlyHovering) {
handleClose();
}
}, 50);
}
return (
<div>
<Button
aria-owns={anchorEl ? "simple-menu" : undefined}
aria-haspopup="true"
onClick={handleClick}
onMouseOver={handleClick}
onMouseLeave={handleCloseHover}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
MenuListProps={{
onMouseEnter: handleHover,
onMouseLeave: handleCloseHover,
style: { pointerEvents: "auto" }
}}
getContentAnchorEl={null}
anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
PopoverClasses={{
root: styles.popOverRoot
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
export default SimpleMenu;
Using an interactive HTML tooltip with menu items works perfectly, without requiring you to necessarily click to view menu items.
Here is an example for material UI v.4.
import React from 'react';
import { withStyles, Theme, makeStyles } from '#material-ui/core/styles';
import Tooltip from '#material-ui/core/Tooltip';
import { MenuItem, IconButton } from '#material-ui/core';
import MoreVertIcon from '#material-ui/icons/MoreVert';
import styles from 'assets/jss/material-dashboard-pro-react/components/tasksStyle.js';
// #ts-ignore
const useStyles = makeStyles(styles);
const LightTooltip = withStyles((theme: Theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
padding: 0,
margin: 4,
},
}))(Tooltip);
interface IProps {
menus: {
action: () => void;
name: string;
}[];
}
const HoverDropdown: React.FC<IProps> = ({ menus }) => {
const classes = useStyles();
const [showTooltip, setShowTooltip] = useState(false);
return (
<div>
<LightTooltip
interactive
open={showTooltip}
onOpen={() => setShowTooltip(true)}
onClose={() => setShowTooltip(false)}
title={
<React.Fragment>
{menus.map((item) => {
return <MenuItem onClick={item.action}>{item.name}</MenuItem>;
})}
</React.Fragment>
}
>
<IconButton
aria-label='more'
aria-controls='long-menu'
aria-haspopup='true'
className={classes.tableActionButton}
>
<MoreVertIcon />
</IconButton>
</LightTooltip>
</div>
);
};
export default HoverDropdown;
Usage:
<HoverDropdown
menus={[
{
name: 'Item 1',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 2',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 3',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},{
name: 'Item 4',
action: () => {
history.push(
codeGeneratorRoutes.getEditLink(row.values['node._id'])
);
},
},
]}
/>
I gave up using Menu component because it implemented Popover. To solve the overlay problem I had to write too much code. So I tried to use the old CSS way:
CSS: relative parent element + absolute menu element
Component: Paper + MenuList
<ListItem>
<Link href="#" >
{user.name}
</Link>
<AccountPopover elevation={4}>
<MenuList>
<MenuItem>Profile</MenuItem>
<MenuItem>Logout</MenuItem>
</MenuList>
</AccountPopover>
</ListItem>
styled components:
export const ListItem = styled(Stack)(() => ({
position: 'relative',
"&:hover .MuiPaper-root": {
display: 'block'
}
}))
export const AccountPopover = styled(Paper)(() => ({
position: 'absolute',
zIndex:2,
right: 0,
top: 30,
width: 170,
display: 'none'
}))
use **MenuListProps** in the Menu component and use your menu **closeFunction** -
MenuListProps={{ onMouseLeave: handleClose }}
example-
<Menu
dense
id="demo-positioned-menu"
anchorEl={anchorEl}
open={open}
onClose={handleCloseMain}
title={item?.title}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
MenuListProps={{ onMouseLeave: handleClose }}
/>
I hope it will work perfectly.

Resources