How to set Anchor to Popover in Material-UI

Question

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.

Answer 1

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: