Background
Follow up ticket from investigation: T271399: Investigation: OOUI Combobox widget behavior. This problem was confirmed yet again in multiple usability tests. The current component has been found to be very confusing when encountering a combobox with a value already inside (this was especially true of custom values). Users did not understand what the dropdown button did (with custom values nothing happens when clicking it and it appears broken). Many users did not figure out that they needed to clear the current value to see the other options.
Behavior should match this example of Vue component: https://vuetifyjs.com/en/components/combobox/#usage
Requirements
- After a selection has been made, if the user clicks back in or clicks the expand button, the full list is shown with the selected item highlighted
- After a custom value has been put in, if the user clicks back in or clicks the expand button, the full list is shown but with nothing highlighted.
- Filtering still works in the same way when user is putting in initial value or starts typing again after clicking.
Mock
A few examples:
| Filled, value from dropdown |  |
| Filled, value from dropdown, user returns and clicks on arrow button. Displays full list with highlight. |  |
| Filled, custom value, user returns and clicks in the text field. Displays full list, no highlight. |  |
Technical implementation
Technical requirements:
- always show the list of all values on focus:
- when there is no value,
- an unknown value or
- a known value (with highlight)
- on blur hide list of values
- on typing filter the list of all values
Implementation
- in MenuSelectWidget.js (where ComboBoxInputWidget gets all the dropdown magic from)
- we store the previous value of the menu in OO.ui.MenuSelectWidget.prototype.bindDocumentKeyPressListener
- and compare with the current one in OO.ui.MenuSelectWidget.prototype.updateItemVisibility
- if it matches we show all values
- if not we filter the menu
- to prevent the menu to show up during editing again (when the previous input might be entered again) we delete the storage
Outcome
click to play
