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.
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 ]