Position is not recalculated on content change

[Ploppz]

https://codesandbox.io/s/reactjs-popup-issue-template-8hzrh

As you can see, the position of the popup is wrong when the contents is updated. In my application, I only start loading the contents of the popup once the user clicks the trigger of the popup, so the popup will be empty (or perhaps some "loading..." text) for a while just as in the above demo.

[svobom57]

+1

Experiencing the same issue.

[yasserf]

I ended up fixing this by adding a reposition action on the imperativeHandle

  useImperativeHandle(ref, function () {
    return {
      open: function open() {
        openPopup();
      },
      close: function close() {
        closePopup();
      },
      toggle: function toggle() {
        togglePopup();
      },
      reposition: function reposition() {
        setPosition();
      }
    };
  }); // set Position

And in my code:

return <Popup
            ref={popupRef}
            trigger={...}
        >
            <Menu contentChanged={() => popupRef.current?.reposition()} />
        </Popup>

And in the Menu

const [content, setContent] = useState()
useEffect(contentChanged, [content)

It aint the cleanest way of doing it, but so far it seems to work well

[rvision]

I am having the same problem as described.

What's the status of this issue?

[Zhdanown]

What I came up with is to add a prop repositionOnResize and trigger an event whenever the content of the popup changed with window.dispatchEvent(new Event('resize'));