SPIKE - RSC-815 Intelligent Dropdown Placement

[avnvbhatta]

https://issues.sonatype.org/browse/RSC-815

[rpokorny]

Rather than computing the number of JSX children and then doing math that makes assumptions about the styling, why not just measure the div?

[rpokorny]

I think we should get design input on whether it should move when scrolling occurs. Additionally this implementation is limited in that it won't handle scrolling of containers other than the viewport itself

[rpokorny]

Consider useResizeObserver to check for resizes of the element's container, not just the viewport

[rpokorny]

The more I think about this the more different cases I see that we need to determine whether or not they need special behavior. Here's a list of what I can think of so far:

1. When the dropdown is at the bottom of the document, such that the menu would either be inaccessible by scrolling or would itself increase the scroll length of the page
2. When #1 doesn't apply, but the dropdown is currently close to the bottom of the viewport due to scrolling, such that its menu would open below the end of the viewport and would need to be scrolled to get to
3. When the dropdown is at the bottom of some container such that its menu overflows out of the bottom of the container, but is still visible and interactive
4. When the dropdown is at the bottom of some container such that its menu overflows out of the bottom of the container, but the container hides the overflowing part making it inaccessible to the user
5. When the dropdown is in a scroll container and the scroll position has the dropdown currently close to the bottom of the container, such that the container would need to be scrolled downwards to see the dropdown
6. When an icon dropdown is close to the left edge of the window such that its menu is cut off when opened
7. When an icon dropdown is close to the left edge of its container such that the menu overflows out the side of the container, but the container does not cut it off.
8. When an icon dropdown is close to the left edge of its container such that the menu overflows out the side of the container, but the container does cut it off via hiding overflow.
9. When an icon dropdown menu becomes cut off due to horizontal scrolling of the window
10. When an icon dropdown menu becomes cut off due to horizontal scrolling of its container.

Some of these are more feasible to address than others, and some are more important to address than others. The most important ones IMO, which are also some of the most doable, are 1 and 6. Of the rest, many are more about convenience than breakage (does the user need to scroll to see the menu), and some would be very difficult (trying to figure out whether a parent container is or isn't cutting off an overflowing menu)