Page MenuHomePhabricator

Replace "Chosen" jQuery plugin
Open, LowestPublic

Description

Hi, I was looking for an awesome way to display selects with icons (and some more markup like smaller a smaller description text below each keyword) and allow adding "multiple tags".

Since Chosen[1] does not support HTML in its rendered result (or at least this is not documented[2]), is there any way to get rid of it and instead use select2[3]?

At least its documentation is a lot more extensive.

[1] https://git.wikimedia.org/blob/mediawiki%2Fcore.git/ca0bbe33e3d719d88683daab36c4b7326ca42b9e/resources%2Fjquery.chosen%2Fchosen.jquery.js
[2] http://harvesthq.github.io/chosen/
[3] http://ivaynberg.github.io/select2/


Version: 1.22.0
Severity: normal

Details

Reference
bz51443
Related Changes in Gerrit:

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 2:02 AM
bzimport set Reference to bz51443.
bzimport added a subscriber: Unknown Object (MLST).

I'm not opposed, as long as the HTMLForm multi select behavior continues to work. It seems that select2 is better maintained than chosen.

matmarex renamed this task from Chosen vs. select2 to Replace Chosen with select2.Dec 21 2014, 6:26 PM
matmarex lowered the priority of this task from Low to Lowest.
matmarex set Security to None.
matmarex removed a subscriber: Unknown Object (MLST).

I wouldn't say this is quite a duplicate — T88250 dealt specifically with OOUI, this is about replacing one external with another. As noted above but even more true now, select2 is somewhat more maintained and featureful (cf. https://github.com/harvesthq/chosen/pull/166)

Maintainers of chosen just yesterday marked it as deprecated and unmaintained: https://github.com/harvesthq/chosen/commit/91041bc9dd6867f9a1668050a1b092d92027f13b

AFAICT cdnjs doesn't have a policy for removal (https://github.com/cdnjs/cdnjs/issues/12144) so I don't think the upstream is likely to cause issues, but I'd say this gives more proof it should be replaced in core. @Rillke I've reopened this, hope that's alright.

Jdlrobson subscribed.

perhaps the frontend standards group can come up with a plan for dealing with this.

I'll add that I'd also prefer Select2 as an alternative to Chosen not only because it's not deprecated, but because Select2's appearance is a closer match to OOUI than Chosen's, and Select2 has the ability to use custom themes if someone were to write an OOUI theme in the future. I'm tagging MediaWiki-ResourceLoader as Chosen is included as one of the core modules but Select2 is not.

@Ahecht Are you thinking of using this in the context of a gadget?

If so, note that libraries don't need to ship with MediaWiki core in order to use them in a gadget. You're free to (yourself, or ask an interface admin on-wiki) to import any jQuery plugins and other libraries as-needed into wiki pages alongside your gadget. These can then be listed as scripts in the gadget definition before your other scripts.

Regarding the suggestion to replace the jQuery plugin "Chosen" with Select2... I think our best practices have changed enough there that we might not want to replace this. Back when we first shipped jquery.chosen, we did not yet have a unified design style guide, and in places where we used JS, we often used jQuery UI, and basically composed different unrelated widgets together like that.

Since then, we've developed Wikimedia OOUI (and more recently, Wikimedia Codex).

@Ahecht Would you be able to use OOUI directly for this use case? Or if you're building an extension, can you use HTMLForm?

There is, for example, the OOUI ComboBox, which might serve your needs. The TagMultiselect and MenuTagMultiselect widgets come to mind as well.

Screenshot 2024-06-10 at 15.47.33.png (426×1 px, 75 KB)

This widget is also available to extensions when building a SpecialPage or HTMLForm via the HTMLTagMultiselectField, HTMLNamespacesMultiselectField, HTMLTagMultiselectField, HTMLTitlesMultiselectField, and HTMLUsersMultiselectField input types. This used on https://en.wikipedia.org/wiki/Special:Activeusers for example:

Screenshot 2024-06-10 at 15.51.00.png (594×1 px, 66 KB)

Krinkle renamed this task from Replace Chosen with select2 to Replace "Chosen" jQuery plugin.Jun 13 2024, 5:28 PM

Change #1043158 had a related patch set uploaded (by Krinkle; author: Catrope):

[mediawiki/core@master] HTMLForm: Remove use of jquery.chosen in HTMLMultiSelectField

https://gerrit.wikimedia.org/r/1043158

Change #1043158 merged by jenkins-bot:

[mediawiki/core@master] HTMLForm: Remove use of jquery.chosen in HTMLMultiSelectField

https://gerrit.wikimedia.org/r/1043158

Krinkle added subscribers: lwatson, Catrope.

In the FSG meeting yesterday, @Catrope, @lwatson (Design System Team) and myself went through the various ways jquery.chosen is used today (Codesearch). Removal of the module may still be a few releases out as migration is non-trivial and we haven't started deprecation yet. But, keeping it without replacement is cheap. More important is the general direction we want to go in. We agree that we do not want to support a standalone replacement for jquery.chosen. Generally speaking MediaWiki core should not be shipping (new) standalone UI component libraries, besides OOUI/Codex.

It continues to be fine for gadgets and third-parrty extensions to use any JS libraries they want, and they can (and do) ship their own third-party libraries already. The Gadgets extension also allows these to be hosted on-wiki and embedded directly in individual gadget definitons, without needing to ship within MediaWiki core. This also offers greater flexibility in deciding if/when to upgrade. Gadgets that rely on Chosen can continue to use it (by migrating to their own copy), and can also choose to use Select2.js if they prefer that, by bundling that in their own gadget.

In terms of what we provide and recommend as a platform: We recommend that extensions use HTMLForm, which handles this automatically as part of the multiselect type (powered by OOUI under the hood today, will naturally change to Codex later). For gadgets, we recommend constructing the relevant OOUI widget directly. You can check https://doc.wikimedia.org/oojs-ui/master/demos/ and https://doc.wikimedia.org/codex/latest/components/overview.html for available widgets. If specific features from Chosen or Select2 are missing from OOUI/Codex, please do file a separate feature request showing how you intend to use it!

I'll keep this ticket open to track changes relating to removing remnant internal references to jquery.chosen in MW core and bundled extensions.

  • Special:EditTags
    • uses jquery.chosen to power the multi-select dropdown menu for the "New tags" field.
    • doesn't use the standard MW-HTMLForm abstraction.
    • currently renders a plain <select> dropdown, until jQuery Chosen is called as $tagList.chosen() in edittags.js
    • change to MW-HTMLForm with HTMLMultiSelectField? That will use OOUI MenuTagMultiselectWidget under the hood, which seems to do the same thing (click to reveal options, multiple choice, typeahead).

In terms of what we provide and recommend as a platform: We recommend that extensions use HTMLForm, which handles this automatically as part of the multiselect type (powered by OOUI under the hood today, will naturally change to Codex later). For gadgets, we recommend constructing the relevant OOUI widget directly. You can check https://doc.wikimedia.org/oojs-ui/master/demos/ and https://doc.wikimedia.org/codex/latest/components/overview.html for available widgets. If specific features from Chosen or Select2 are missing from OOUI/Codex, please do file a separate feature request showing how you intend to use it!

Additionally, code using Codex will be able to use the ChipInput component for this purpose, once T345291: [EPIC] MultiselectLookup: Add new component is done.