React Display Separate Popover Component on Menu Click

Question

I have the below menu:

So, ideally you'd click on those 3 dots which would open up another box next to it, I decided to use a popover(https://material-ui.com/components/popover/).. The problem is that when you click the 3 dots nothing happens. I assume this is because onClick function returns a functional popover component but that doesn't get displayed. I put in debuggers and alerts inside the functional component no hit at all.

This is those 3 dots

 <IconButton
        aria-describedby="simple-popover"
        variant="contained"
        onClick={e => this.moreClick(e, props.children)}
      >
        <More />
      </IconButton>

This is moreClick function

  moreClick = (e, officeAccount) => {
    return (
      <AccountFavoritesPopover element={e} officeAccount={officeAccount} />
    );
  };

This is the whole popover

import React from "react";
import Popover from "@material-ui/core/Popover";

export default function AccountFavoritesPopover(element, officeAccount) {
  const anchorEl = element;
  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        //onClose={alert}
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <div>{officeAccount}</div>
      </Popover>
    </div>
  );
}

Does popover have to be inside the main file? Currently the 3 dots is in the main file and AccountFavoritesPopover is a whole separate file.

I attempted to put "AccountFavoritesPopover" code inside the main file but I cannot utilize useState in the main file because it's a class. Also, I cannot convert it to actual state and use setState because once setState kicks in, the menu will disappear...

Edit: Below is the Menu

<Creatable
  id="Select"
  menuIsOpen={this.state.Focused}
  components={{
    Option: this.Option
  }}
/>

Below is the Options inside menu

<div style={{ position: "relative" }}>
        <components.Option {...props} />
        <div id="MoreBox">
          <IconButton
            aria-describedby="simple-popover"
            variant="contained"
            onClick={e => this.moreClick(e, props.children)}
          >
            <More />
          </IconButton>
        </div>
      </div>

Nagesh Dhope · Accepted Answer · 2019-10-14 17:04:19Z

1

Try this, this should work(Not tested)

Main.js

export default class Main extends Component {
    constructor(props) {
        this.state = {
            selectedIndex: 0,
            selectedId: 0,
            anchorEl: null
        };
    }

    moreClick = (anchorEl, selectedId, selectedIndex) => {
        this.setState({
            selectedId,
            selectedIndex,
            anchorEl,
            open: true,
        });
    }

    handleClose = () => {
        this.setState({
            open: false
        });
    }

    render() {
        const menu = [
            {
                id: 1,
                text: '002',
                more: 'more 003'
            },
            {
                id: 2, 
                text: '003',
                more: 'more 003'
            },
            {
                id: 3, 
                text: '004',
                more: 'more 003'
            }
        ]

        const menuDom = menu.map((m, index) => {
            return (
                <IconButton
                    key={m.id}
                    aria-describedby="simple-popover"
                    variant="contained"
                    onClick={e => this.moreClick(e.currentTarget, index, m.id)}>
                        {m.text}
                </IconButton>
            )
        })
        const more = (<More>{menu[this.state.selectedIndex].text}</More>)
        return (
            <div>
                {menuDom}
                <AccountFavoritesPopover open={this.state.open} anchorEl={this.state.anchorEl} onClose={this.handleClose}>
                    {more}
                </AccountFavoritesPopover>
            </div>
        )
    }
}

AccountFavoritesPopover.js

export default function AccountFavoritesPopover(open, anchorEl, onClose) {
    const id = open ? "simple-popover" : undefined;

    return (
      <div>
        <Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={onClose}
          anchorOrigin={{
            vertical: "top",
            horizontal: "right"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
        >
          <div>{this.props.children}</div>
        </Popover>
      </div>
    );
  }

edited Oct 14, 2019 at 17:04

answered Oct 14, 2019 at 16:56

Nagesh Dhope

8376 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Extelliqent Over a year ago

Thank you but, if moreClick causes a state update, then main will get updated, which would mean, menu will close. So when you click menu closes and popover opens is not really a good ux.

Nagesh Dhope Over a year ago

Can you update your question with main.js file. open state is for handling popover, just want to understand how dropdown menu going to get closed

Extelliqent Over a year ago

Sure @Nagesh, I updated. So what happens is, when you click the menu {this.state.Focused} gets updated in state to true to show the menu. then when you click away it closes.

Collectives™ on Stack Overflow

React Display Separate Popover Component on Menu Click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related