useDismiss + ancestorScroll: dismiss only when reference is scrolled out of ancestor visible viewport

Example: https://codesandbox.io/s/lively-sunset-kyohtw?file=/src/Select.tsx

I modified the Select example from the docs site a bit to try to showcase what I’d like to achieve. I’m trying to set up a reasonable behavior for a Select floating menu in a scrollable area (which can also be a floating element). The Select menu is portaled, so it is essentially detached from the Select control button.

Essentially, the issue is that ancestorScroll: true option in useDismiss hook dismisses the floating element immediately. This however can be quite annoying to users, as they can open the Select, then accidentally trigger a scroll, which will immediately close the menu. I do not wish to use a scroll locking mechanism to be honest, because at times the select menu height can be quite small, so would like to allow users to scroll to top or bottom to increase the visible item count (this small height issue is not very well visible in the linked example).

I would like the floating element to not dismiss immediately, like ancestorScroll currently does, rather when the reference element is scrolled out of the ancestor viewport, i.e. when the reference and floating element get “detached” from each other due to portaling.

Any thoughts, is this reasonable to support in floating-ui directly, or should this be implemented in userland?

[atomiks]

hide() is part of the positioning library so it doesn’t have any hooks to the interactions package. It will remain rendered while scrolling out of view, but you use it to visually hide it using a CSS style.

To un-render it when that value becomes true just requires an effect like this:

useEffect(() => {
  if (middlewareData.hide?.referenceHidden) {
    setOpen(false);
  }
}, [middlewareData.hide?.referenceHidden]);

[mihkeleidast]

Yeah, that makes sense - I guess this is only feasible to use with a virtual focus, then it should not scroll. Thanks for the help!