1

I have a menu component that uses popperjs for showing the popup menu. When clicked on the button for the first time the popup appears at top left corner of the screen instead of below the button. I have used react portal for placing the rendered menu.

The problem resolves when I use useState hook to capture references of popper and reference elements(as suggested in the examples on react-popper). But I have implemented a clickaway hook to hide popup when you click any where but the popup, for which I need to use useRef. and then I do usePopper(refElem.current, popperElem.current). I have reproduced the problem here

Nilesh Kumar
  • 343
  • 1
  • 5
  • 18
  • its too much, you can make your own component and switch it with state, no need of popper – Nisharg Shah Dec 27 '20 at 18:55
  • I implemented it this way before but when i put this into a container with overflow hidden popup is clipped, so need to put it on the body and then reposition the popup wrt to the button, this is the reason i used popper – Nilesh Kumar Dec 27 '20 at 19:01
  • Did you manage to find a solution? I'm dealing with the same thing. – Reinier68 Nov 07 '21 at 09:40

0 Answers0