Reactjs - open material ui popover on focus

I have a table that is dynamically populated by an API. It needs to be editable, and I've figured out that part, but it also needs a way to update the API after edits.

I want to use a popover with save/cancel buttons. I've tried everything I can think of, but I can't get the popover to show up, and it doesn't error out either. The material ui docs only cover click/hover popovers. I noticed that reactstrap seems to have a popover that works with focus, but I'm trying to use material UI because I don't want to bloat my project with extra packages if I don't have to.

This is what I have in my EditPopover.jsx file:

const styles = theme => ({
  popover: {
    pointerEvents: 'none',
  paper: {
    padding: theme.spacing.unit,

class EditPopover extends React.Component {
  state = {
    anchorEl: null

  handlePopoverOpen = event => {
    this.setState({ anchorEl: event.currentTarget });

  handlePopoverClose = () => {
    this.setState({ anchorEl: null });

  render() {
    const { classes } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
            paper: classes.paper,
            vertical: 'bottom',
            horizontal: 'left',
            vertical: 'top',
            horizontal: 'right',
          <Typography>Click for full size image.</Typography>

EditPopover.propTypes = {
  classes: PropTypes.object.isRequired,

export default withStyles(styles)(EditPopover);

This is where I call the popover. I have tried using onClick as well:

  handleEdit = event => {
    <EditPopover event={event}/>

  renderEditable = cellInfo => {
    return (


The first and second code blocks in this post are in separate files. I feel like I'm not passing something correctly to the popover.