How to use open([eventOrAnchorEl])

I am trying to use popupState.open in a component I have created, but I’m a bit confused on how it’s meant to be used. I essentially want to use this to re-render my popup, because I have some dynamically rendering components (i.e. the popup renders, I click a button in the popup, and more stuff shows up). Depending on screen size the dynamic content will show off the screen until I re-engage the popup.

I tried just calling popupState.open() with no parameters, and it works, but I get this error: eventOrAnchorEl should be defined if setAnchorEl is not used. I actually do have an event that I can pass in (I assumed it could take an event judging by name), but it changes the location and throws this warning: the anchorEl prop provided to the component is invalid. The anchor element should be part of the document layout. Make sure the element is present in the document or that it’s not display none.

If it’s okay to just use popupState.open(), I may just keep doing that.

I’m sure I’m just not fully understanding how things should work, but any guidance would be appreciated. Thanks.

[jedwards1211]

The popover positions itself relative to the anchor element, so it wouldn’t make sense for it to position itself relative to a button inside itself. Not sure what was happening when you did that but probably first it closes the popover (since the anchorEl changed) then tries to figure out the position of the new anchorEl before reopening, but the anchorEl no longer exists since it was inside the closed popover.

Btw see if you can get everything to work without calling updatePosition, it wasn’t actually necessary in my example, I just included it to show you how to use it in case you need it. I used setTimeout just because I assume I need to call updatePosition after the component rerenders. You could probably also call updatePosition in a useLayoutEffect hook whenever expanded becomes true.

[jedwards1211]

My fault for not documenting open well, really you do need to pass an event or anchor element to open(), because Material-UI Popover/Popper/Menu need an anchor element when open to decide where to show themselves. Really I should make open() throw if it doesn’t have an anchor element.

As far as keeping the popup in the right position when its size changes, it seems to generally handle that just fine if it has an anchorEl, but if for some reason it doesn’t work, I discovered that Popover/Menu has a not-very-documented action API for doing this. I made a demo of how to use it here.

If you’re using Popper, I’m not sure how triggering a reposition would be done.