Implement HTMLAutoCompleteSelectField better in OOUIHTMLForm. If possible, we should have a specific widget for this in OOUI, rather than just use dropdown + text field with autocomplete.
|Open||None||T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core (replacing it with OOUI).|
|Open||None||T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core|
|Open||None||T98880 Improve OAuth management interface|
|Resolved||Tgr||T96154 OOUI-ify the management interfaces (special pages) for OAuth|
|Declined||matmarex||T98856 Implement HTMLAutoCompleteSelectField in OOUIHTMLForm|
|Resolved||MarkTraceur||T85291 Implement OOUI "display format" in MediaWiki's HTMLForm|
|Resolved||matmarex||T97871 PHP TextInputWidget has no 'required' config|
|Resolved||matmarex||T91132 Forcefully preventing default event actions on FormLayout, ButtonWidget and ButtonInputWidget is problematic|
|Resolved||matmarex||T85285 Disentangle VForms from HTMLForm code in core|
|Resolved||Esanders||T107674 Improve use of DropdownInputWidget with long lists|
@Nirzar, @Prtksxna, can you help us come up with some neat way to implement this? I'm not a fan of the current approach (screenshots / links to examples below), and it would probably become clunkier with the bigger OOUI widgets. @Anomie and I exchanged some ideas on IRC (pasted the conversation below too), but we didn't really like anything.
Is there a better way to present the choice of one from few hundred options, with several possibly much more commonly used? (If we need a new widget or some variant, I can implement it.)
Screenshots of the HTMLAutoCompleteSelectField used on https://www.mediawiki.org/wiki/Special:OAuthConsumerRegistration/propose:
- First displayed as a dropdown.
- When one of the options is selected ("Specific project" in this example), an additional text field with autocompletion is displayed. Only the values from the autocompletion list are valid (you'll get an error if you type anything else).
[18:13] <MatmaRex> anomie: hey. i'm struggling to understand the purpose/design of HTMLAutoCompleteSelectField
[18:14] <anomie> MatmaRex: Purpose is to avoid having a <select> with 800+ options to dig through.
[18:14] <MatmaRex> anomie: okay, that was exactly what i wanted to ask, why it's not just a big <select>
[18:14] <MatmaRex> anomie: mark and I have been working on OOUI implementation of HTMLForm https://gerrit.wikimedia.org/r/#/c/205719/ and that one kind of didn't fit anything sensibly
[18:18] <MatmaRex> anomie: so, we could probably implement that in the OOUI way the exact same way as it is now (select box + text input with autocomplete), but that's not very neat, i think
[18:19] <MatmaRex> anomie: we have a "combo box" widget, though, and i would try to use that. i'd link you to the OOUI demo to try it, but it is annoyingly down currently
[18:28] <anomie> MatmaRex: Looking at ComboBoxWidget on the demo page locally, it doesn't seem to filter the stuff in the dropdown as you type.
[18:31] <MatmaRex> hmm. yeah, it only selects an option if you type an exact value. so that probably won't work so well, actually
[18:32] <anomie> The more important thing is that typing "en." in the box should only show "en.wikipedia.org", "en.wiktionary.org", and so on in the dropdown. Then probably allowing arrows to select one, or click, or keep typing.
[18:32] <anomie> (well, not for the demo obviously, but for the places it's actually used that's what it's used for)
[18:36] <anomie> MatmaRex: If you need to see the existing implementation in action, you should be able to go to https://www.mediawiki.org/wiki/Special:OAuthConsumerRegistration/propose where it's used for "Applicable project".
[18:37] <anomie> Also https://test.wikipedia.org/wiki/Special:SecurePoll/create, if you have access to that one.
[18:37] <anomie> ("For wiki" field there)
[18:42] <MatmaRex> anomie: hmm, i think this would work better if we changed the <select> to a set of radio buttons, where one (for the 'other' option) would have the autocomplete field in the label area?
[18:43] <MatmaRex> (anomie: yeah, i've been looking at the usage in OAuth, mark is trying to make its forms use the OOUI version in https://gerrit.wikimedia.org/r/#/c/205720/)
[18:43] <anomie> MatmaRex: Maybe. These examples don't have many options in the <select>, but it could get big if there were (e.g. if someone dumped a lot of options into $wgSecurePollCreateWikiGroups)
[18:44] <MatmaRex> we can just say that someone shouldn't do that.
[18:45] <MatmaRex> :P
[18:45] anomie doesn't like that suggestion much
[18:49] <MatmaRex> anomie: i'm going to dump what we said into a bug and ask nirzar or prateek to help us come up with something pretty, i think
[18:49] <anomie> MatmaRex: ok
I just had a thought that this would work well as a regular big dropdown, but with the additional options hidden in a collapsible section. I'll probably try implementing that soon. If I do, I'll put it in MediaWiki rather than OOUI, since this would be a pretty niche widget and the library's size has been ballooning recently.
Sure. It's pretty close in behavior to the existing solution, except that
- it's slightly faster as you don't need to select the "all projects" option first and can start typing immediately
- if you have already selected a wiki, switching back to "all wikis" is slightly slower as you need to scroll to the top
- it shows you the list of all projects which is nice for small wikifarms
- it falls back more nicely when there is no JS - you get a list of applicable projects instead of having to figure out the exact name
What is the use case here? Does the user have no knowledge of what they are looking for? Seems unlikely in the OAuth consumer registration case, what other cases are there?