Guideline for the widget "Selection Dialog"

Purpose of the Widget

The Selection Dialog is used when users have to select one element out of more than five - or an unknown number of - items, i.e. cases where traditionally comboboxes (or HTML <select> elements) are used.

Description of the Widget

The dialog is called by pressing a button. This button is labeled "Select (a/an) [item type]" (e.g. "Select timezone") if no item is selected and is labeled with the item name if an item is selected. The dialog is centered on the screen, with height and width to fit its content, and consists of the following elements:

A title: "Select (a/an) [item type]" if no item is selected, and "[item type]: [selected item]" if one was selected before the dialog is opened
A search field which instantly filters the list of items
A finger-scrollable list of items

The dialog has no close button.

If the user taps outside of the dialog, the dialog is closed and the selection remains unchanged
When the user taps an item in the list, the dialog is closed and the item is selected.
If the dialog loses focus by other means, it is closed as well

TODO: Insert screenshot

Code to Implement the Widget

TODO: Insert code