Select Popover placement is 'top' despite plenty of space available to render below

[kraine93]

Hi!

I'm having an issue whereby a Select component will render its Popover with placement 'top' despite there being plenty of space to render it below.

This happens in a specific situation where the number of items in the List is more than can be displayed in view, meaning that the Popover will have a scroll (not a problem). This makes sense, because it's choosing to render where there is the most available space to have more content in view.

However, the problem persists even when using maxHeight on the Popover component and setting a max-height on the List component, as well.

In the screenshot below, the Popover's maxHeight is 300px, but any time the Select is below the centre point of the page, the placement will always resolve to 'top' rather than 'bottom':

I can't work out why this is 😅 does anyone have any ideas?

[kraine93]

After digging a little I'm wondering if there is an issue here: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/calculatePosition.ts#L354?

I'm guessing, but it seems like maybe the scrollSize is not taking into account the userSetMaxHeight, resulting in a flip when it's not necessary.

[kraine93]

It makes more sense after going through the whole stack:

1. Select creates a scrollRef, passes it to the PopoverContext, and also assigns it to the ListBoxContext ref.
2. This is passed all the way down to calculatePosition, so eventually the scrollNode used for the position calculation is the ref of the ListBox component.
3. The scrollSize used in calculatePositionInternal is an object containing the scrollX properties of the element, so height = node.scrollHeight.
4. Which means when it does the calculation scrollSize["height"] > space, it uses the full scroll height of the element.
5. In my case this was 2808px.

Since the scroll height should be limited by the max height, should it actually first check which is the lesser, before comparing that value to the available space?

[kraine93]

My workaround was to create a ref for the Popover and then pass that as the scrollRef, so that it uses the container height rather than the ListBox scroll height 😅

<Popover
  ref={popoverRef}
  scrollRef={popoverRef}
>