How to make Popover work inside a scrollable div?

[tuananhlai]

Hi everyone, I have a small question regarding React Spectrum's Popover.

While Popover's position is updated when the body is scrolled, the position doesn't seem to be updated when it is put in a scrollable div. The video below demonstrate what I meant. I'm using ComboBox element here, which uses Popover under the hood. Here's the CodeSandBox link.

If anyone can help me resolve this issue, I'd be deeply appreciated. Thank you.

2023-09-26.17.12.50.mov

[LFDanLu]

This is actually a bug, the combobox should actually close its popover when the page is scrolled due to issues in updating the popover's placement in cases like the one you've shown above.

[tuananhlai]

Is there a known workaround for this? 🤔

[LFDanLu]

Short of modifying this line so that it is !(isNonModal || !state.isOpen) via something like patch-package (untested btw), no unfortunately.

[tuananhlai]

Thank you for your answer. Is this what you meant by modifying the line?

  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
    ...otherProps,
    targetRef: triggerRef,
    overlayRef: popoverRef,
    isOpen: state.isOpen,
    onClose: !(isNonModal || !state.isOpen) ? state.close : null
  });

[LFDanLu]

That looks about right

[tuananhlai]

Thank you for your time. I've created a bug report issue for this behavior. 🙇

[tuananhlai]

Bug report issue created. Closing the discussion as resolved.

#5139