Filterable select and scrollbars

Now that we are allowing the input element to be nested inside of the select element to create a filterable select, it will currently move the text field inside of the scrollable area created by the select element. This happens in both the listbox and dropdown cases.

I'm guessing this is not desired and that we should fix it by default, but what do others think? Is this actually ok? The labels picker on github has the options in a scroller and has the text field as a separate thing that isn't in the scroller.

Here are some possible ways I think we could address this:

1. Don't address it, let authors fix it by wrapping the options in a div and making that a scrollable area and adding CSS to the select element or ::picker(select) to make it stop scrolling.
2. Remove the styles which make the select element as a listbox or ::picker(select) scrollable when there is a descendant input element, and move those scrollable styles to the new element which wraps options in the UA shadowroot.
   • As I've implemented it right now, this new element to wrap options pretty much only exists to make a11y mappings easier to implement. This would give it more purpose if we make it a scroller, and we could try exposing it as a part-like pseudo-element.
3. Make the input element position:sticky

Start by reviewing the filterable select behavior for nested input elements in both listbox and dropdown cases, including the select element, ::picker(select), and the UA shadowroot options wrapper. Compare the three proposed scrollbar treatments and document a decided default behavior, including how authors can control the scrolling area.