I accidentally created a Select component with 217 menu items here (click "Select an icon"). I noticed that a Select with that many items (or, generally, more items than fit on the screen) causes problems.

In this case, the Select is inside a container with limited height that becomes scrollable when it's too tall, so it looks like this:

If it's not inside such a container, it instead expands over the rest of the page endlessly, and you have to scroll down the page to get to the item you're looking for (and then back up, because you're left at the bottom of the page).

The native HTML <select> lets you start typing the name of the item and will navigate to it, but our Select doesn't do that. You can use the arrow keys to navigate, but the highlighted item isn't scrolled into view automatically.

We could consider enhancements to make this work better. Here are some ideas (some of which contradict each other):

• Clipping the dropdown menu to the edge of the page (or the scrollable container), and making it scrollable (this is what OOUI does)
• Making the menu scroll in a way where it moves but the rest of the page stays in the same place (like the Mac OS behavior for <select>)
• Scrolling the menu to make the highlighted option visible when keyboard navigation (arrow up/down) is used
• Responding to more navigation keys (like Home and End)
• Scrolling the selected option into view when the dropdown is opened
• Allowing the user to search for an item by typing the first few letters of it; when the user types a letter, highlight the first item that starts with that letter and scroll it into view

For use cases with hundreds of possible choices, perhaps we should recommend a different component, like a Lookup, a Combobox, or some sort of cross between the two (a Combobox that filters as you type). However, most of these issues would be good to solve regardless, because they also affect Selects with a less absurd number of items (e.g. 20), or Selects in certain situations (e.g. close to the bottom of the screen/page).