Selectmenu should have a default max height

[sandygettings]

If you have a simple <select> control with many items (say, 40 or so), the entire select list cannot fit within a small browser window. Conveniently, the browser will automatically display a portion of the list with a scroll bar.

A selectmenu widget with the same list does not display a scroll bar; the user must scroll the entire browser window instead. This is not consistent with the default behavior of the <select> control in browsers.

A workaround is shown in the widget’s documentation by explicitly setting the selectmenu’s menuWidget height (or better still, max-height). However, this is an extra step for the developer and does not automatically adapt to browser windows of different sizes.

Suggestion:

1. Display the selectmenu with a default max-height similar to the simple <select> control (about 20 items).

2. Or, display the selectmenu with a max-height that extends to the bottom of the browser window at the time the selectmenu is opened. This is especially convenient for users with larger monitors.

3. Or (preferably), display the selectmenu with a max-height that is the greater of the two options above. This guarantees that the selectmenu displays at least a minimum number of items in small windows and can still display more items when the user has a large window.

Note that I’ve implemented #3 above using the widget’s “open” event handler. I’m happy to share this code if anyone is interested. This issue was tested with Chrome 41, Firefox 36, and IE 11.

[ large block of code removed ]

[Scott González]

Adding a default max height requires adding an icon to indicate when the menu is scrollable to address usability issues on devices like an iPhone where the scrollability isn't obvious. To address this, we'll add a class when the menu is scrollable and insert an arrow icon at the bottom.

[Syed ObaidUllah Naqvi]

Please check the commit:

​https://github.com/obaidnaqvi/jquery-ui/commit/a42c825f4231f22021accfd114b34241687ada35