Comboboxes should consider window border when opening, or they should scroll automatically

[carmacleod]

If a combobox is at the very bottom of the window, then the popup won't be visible because it is clipped below the bottom of the window. Options can still be selected with down/up arrows and enter, however it looks like the popup is missing, which could be confusing to a user.

Similarly, if the combobox is close to the bottom of the window, such that the lower portion of the popup is clipped, and the user types down arrows to go through the list, they will eventually "go past the bottom of the window" and they will no longer be able to see which item they are selecting.

Steps to see this (using select-only combobox as an example, but note that the other combobox examples have the same problem, so the fix should probably be in shared utility code):

• go to the select-only combobox example.
• tab to the combobox
• shrink your window vertically so that the bottom of the combobox just touches the bottom of the window (see screenshot 1)
• drop down the combobox using down arrow or alt+down arrow or typing a character
• seems like nothing happens (not good)
• now manually scroll your window so that the combobox is near the bottom (see screenshot 2)
• type down arrows until you have no idea which option is current (not good)

Screenshot 1: select-only combo at bottom of window

Screenshot 2: select-only combo near bottom of window showing only top half of dropdown

Comparing with native selects

I looked at native selects in Chrome, Firefox and Safari and saw 2 different behaviors. Chrome and Safari both display the dropdown below the bottom of the window if there's room, or above the select if the bottom of the window is near the bottom of the screen (screenshot 3). Firefox only displays the dropdown above the select, whether or not there would be room to display it below the window boundary (screenshot 4).

Screenshot 3: native select in Chrome showing both below window and above select behavior

Screenshot 4: native select in Firefox showing select opening above

We need to decide which behavior we want for our comboboxes (copying the Firefox behavior of always opening above when at bottom of window would be easiest). Then we need to decide if/how we want the code to be shared. Then we need to implement the fix.

I suppose another method would be to actually focus() the options so that the browser handles scrolling to show the focused option, i.e. the Date Picker combo scrolls automatically because the interactive controls in its popup dialog take focus. However, in a combobox with autocomplete, moving focus away from the input might not be the best choice.

One more alternative is that we could do the scrolling to make sure the active descendant option is in view, as if we were acting on the browser's behalf. This might seem a bit excessive, but for long lists, I kinda like this option best. :)

(Of course, it would be lovely if browsers would automatically scroll to keep the aria-activedescendant element in view, but that would go against the strict rule that ARIA does not affect browser behavior).