Unify select mechanisms/widgets

[jancborchardt]

Currently we use 4 different things:

1. <select> – simplest from the browser directly
2. select2 – allows for tag widgets for example
3. jQuery autocomplete – used in sharing and Mail app autocomplete
4. our core/js/multiselect.js – used mostly in user mgmt for group memberships because it allows you to add new elements (like for the Github labels and Milestones dropdown).

@nextcloud/javascript & @nextcloud/designers would it be possible to maybe decide on one or maximum two to use consistently?

Also cc @georgehrke @ChristophWurst @schiessle @Henni @icewind1991 because these things are heavily used in apps and user management.

Where are they used:

• /apps/user_ldap/vendor/ui-multiselect/src/jquery.multiselect.js in the LDAP app:

• select2 core:
  • files_external
  • systemtags
  • workflowengine
  • settings (group select)
• select2 apps:
  • announcementcenter
  • bookmarks
  • circles
  • contacts
  • dicomviewer
  • files_automatedtagging
  • files_retention
  • richdocuments
  • sensorlogger
  • spreed

[skjnldsv]

:D
Clearly will help regroup the various styles we're using.
See #1805 for all the fixes we got

[MorrisJobke]

@nextcloud/javascript & @nextcloud/designers would it be possible to maybe decide on one or maximum two to use consistently?

I already tried to do so, but it sounds easier than it actually is. This is a really tough task, but we should do.

[skjnldsv]

While the vuejs apps start rolling out, my choice has been into vue-multiselect. Which allows tagging, creation, multi and simple select. I implemented the new design into the vu settings migration here #8824 .

Looks very nice, supports array and objects, is highly supported... :)

[jancborchardt]

@skjnldsv good stuff! Do we still need to have this open for tracking, like do you have an overview where the old method of select is still used where it needs to be replaced?

[skjnldsv]

Yes because we still have some old legacy stuff laying around! :)

[rullzer]

@skjnldsv feel free to update the first comment to list all the remaining things that need to be cleaned up. So people can easily see/track/tackle/fix it ;)

[MorrisJobke]

@skjnldsv feel free to update the first comment to list all the remaining things that need to be cleaned up. So people can easily see/track/tackle/fix it ;)

I added the stuff for select2 and core/js/multiselect

[skjnldsv]

Thanks @MorrisJobke

[jancborchardt]

@skjnldsv @MorrisJobke a lot of progress has been made on this, right? Do we still need this overview issue and should we rather work on a case-by-case basis?

[skjnldsv]

I guess this is just a matter of deprecating it so we can unship the libs in 3 versions :)

[MorrisJobke]

I guess this is just a matter of deprecating it so we can unship the libs in 3 versions :)

In reality we also need to move our own stuff away from it. 😉 (that is the real major part after deprecating something)

[PVince81]

regarding select2 I just grepped the 25.0.0 beta6 tarball and found these usages:

• files_external settings dropdowns => port the whole section to Vue
• system tags:
  • files app sidebar selection logic (the one and only user of SystemTagsInputField class it seems) => maybe we replace all the systemtag*.js with an extension of NcMultiselect for selecting tags
  • admin settings page to manage system tags
• groups selection in various settings (ex: excluding some from sharing) => might need a generic group selection vue component usable in all settings pages ?
• circles file list filter field