Filterable select and scrollbars

[josepharhar]

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

[lukewarlow]

I vote to leave it as part of the scroller and to just let authors decide what behaviour they want. Like you say position sticky is probably what they want but we can't know that.

[css-meeting-bot]

The Open UI Community Group just discussed Filterable select and scrollbars.

The full IRC log of that discussion

<masonf> q+
<flackr> q+
<dbaron> q+ about sticky
<dbaron> q- about sticky
<masonf> ack masonf
<masonf> ack flackr

[mfreed7]

The Open UI Community Group just discussed Filterable select and scrollbars.

Actual meeting notes are here: https://docs.google.com/document/d/1mHzKRTGk6bs7uHN9Y3HuN3mT-XFd7mBP7tLlWNPnyOs/edit?tab=t.srm6ztuhp2gh