ComboBox display issues

[paperdave]

there are a handful of combo box issues that make the component hard to use.

attached is a capture with a box with 50 elements. the popup is scrollable, but it appears above the top of the page if it is too close.

https://user-images.githubusercontent.com/24465214/143321478-8b9735b9-be88-46d8-b565-ea6b096d0dec.mp4

<main>
  hello
  <ComboBox
    value="6"
    items={Array.from(Array(50).keys()).map((i) => ({
      name: `Item ${i}`,
      value: i.toString(),
    }))} />
</main>

---

similarly, if scrolling you can get the combobox to be cut off.

https://user-images.githubusercontent.com/24465214/143322057-363dbb82-1416-4a8b-9ebd-b1a375ef6909.mp4

also, it can be cut off with overflow:hidden css.

[Tropix126]

At the moment it's done this way because

• a) The native controls get around this by rendering the flyout out of window bounds.
• b) Due to us using position: absolute; for flyout positioning rather than a dedicated library, it makes checks for this kind of thing slightly more difficult.

Obviously this isn't ideal on the web though, since it's not possible to render DOM contents outside of the viewport. I think the ideal solution here is to check if the flyout anchor's getBoundingClientRect.top() is less then zero, then render the flyout as it would be if the first item was selected. I'll see what I can do in a bit about this.

Alternatively, we could use a library like floating-ui for positioning logic, but I don't like the idea of bundling more javascript than we already need.

[Tropix126]

Reopening since #48 wasn't intended to close this.