Opening a popover from a FullCalendar selection - struggling to understand setPositionReference

[joelstein]

I'd like to open a popover by selecting a time range in FullCalendar.

I don't have a reference element initially. When selecting the range, FullCalendar places a highlight element in the DOM, and I'm trying to set the position reference to this DOM element.

The popover is displayed, but the positioning is wrong. I can't figure out how to set the position reference so Floating UI knows where to place the popover.

Here's a simple example. Use your mouse to select a range (like you would with Google Calendar), and you'll notice the popover is placed in the top left corner of the document instead of next to the reference element.

https://stackblitz.com/edit/react-vad8qt?file=src%2FApp.js

Is there a trick to this that I'm missing?

[atomiks]

It looks like there are two issues:

• First is that elements.positionReference isn't supported as an option to useFloating(), you need to use the setter in the returned refs object: refs.setPositionReference(element).
• Second is that the target returned from FullCalendar's select function is not actually on the DOM. If you log it out in DevTools, you'll see it's not connected to the document when you hover over it (no highlight); it seems like a different element. So the floating element is not connected to any real element for positioning, therefore it gets positioned at (0,0). I'm not familiar with that library to know the solution to this.

[joelstein]

Bless you! Thanks for such a fast response.

First is that elements.positionReference isn't supported as an option to useFloating(), you need to use the setter in the returned refs object: refs.setPositionReference(element).

Ah! Thanks for that.

Thanks for pointing out refs.setPositionReference(element). That makes sense now that I see it.

Second is that the target returned from FullCalendar's select function is not actually on the DOM.

Oh, fantastic observation. That pointed me in the right direction. FullCalendar has a selectMirror option that places an actual DOM placeholder element. Using that option gave the element positioning, and now it all works.

https://stackblitz.com/edit/react-vad8qt?file=src%2FApp.js

You've created a wonderful project here. I'm a long-time Tippy admirer, and I'm finally making the transition to Floating UI.

Cheers!

[joelstein]

FWIW, I was able to get this working with the highlight element:

select={(info) => {
  const rect = info.jsEvent.target.getBoundingClientRect();
  refs.setPositionReference({
    getBoundingClientRect: () => rect,
  });
  setIsOpen(true);
}}