Ok, I have dropdown menu that I'm trying to make a reusable component in a project. The problem is that when I click to open the menu, it opens as expected, and upon clicking it again it closes as expected. But on the next click, and all the subsequent ones, the menu doesn't show up. I've done some investigating in my project and have found that it is in fact rendering but it's translating to the upper left corner of the page and is getting covered up by other components.
I've consoled the 'show' state and it is acting as expected, toggling true/false with each click. I've setup this codesandbox as an example of the issues, though it's not all there in detail. What you'll notice though is that the menu behaves as expected on the first show/hide cycle but every click after that renders the menu in the upper left corner, just like my real life example.
Can anyone explain why this happens? How to fix it?
The issues I'm ultimately trying to fix is how to get only one menu to be open at a time. You'll notice in the sandbox that I put the menu inside buttons, which is a very contrived and seemingly pointless demo, but it's similar to the situation I have in my project where I need the menu to live within a parent that also has an onClick. You'll see some commented out stuff where I'm trying some different stuff to address that issues, but if you have any ideas on how to solve that I'm all ears too!
https://codesandbox.io/s/ecstatic-frost-ztry6z?file=/src/customToggle2.tsx
I've noticed that if I remove the 'show' prop from the dropdown and I just let the onClick inside the Dropdown.Toggle handle the state updates the popper always pops up in the correct place, but I think I need to use that prop and handle the state change manually for the other issues of not having two menus open at once. This seems to be the only thing I can change to get the popper to stay in place.