If you’re recreating something the OS does though, please try to do it as well as the OS does!
Here’s a useful list of behaviours for a dropdown list box which might seem obvious, but I have seen overlooked so many times.
- Priority 1
- Display the current selection in the unexpanded box
- Display a downwards arrow to the right of the box to indicate it has a dropdown
- When clicking the box, or the arrow, expand to offer other selections, and when clicking one of those, contract the box and display the exact text for that selection in the box
- Priority 2
- Allow keyboard navigation – up and down should move amongst the items, highlighting as appropriate and return should select them as if the user had clicked them
- Allow keyboard shortcuts – pressing a character should jump the selection to items beginning with that character
- Priority 3
- Spacial awareness – where there is no space for a dropdown to appear beneath, or it would appear outside of the viewport, it should appear above instead
- Dimensional awareness – where there are too many items to display reasonably a scroll bar should display to keep the entire dropdown box in view
I have seen instances where many of these have been ignored, and in the very worst case, where selecting an item showed completely different text in the contracted box. Even an instance where the text displayed actually matched a completely different item in the list!
Hope this helps. AK