Replace select2 with TomSelect

[richardebeling]

• Some TODOs are left in the code
• Licensing? Tomselect uses the Apache2.0 license
• The minimum input length turns out to be harder than initially thought, because the shouldLoad function seems to only apply to network loads (using load), and not showing options that are already locally available (such as the select options in the html). I wasn't able to come up with a nice solution for that yet.
• Frontend tests?
• Move stuff into a .ts file? The base template could use some cleanup.
• Jumpy bug -- needs minrep example and bugreport with tomselect. It works on their examples.
• For @niklasmohrin, on firefox, the tomselected selects didn't work at all.
• Add another doesn't seem to work properly.
• If converting to typescript is tricky, maybe move into seperate base.js file? (discuss) (edit: I don't feel like it.)
• Tag inputs: Enter can submit (see Replace select2 with TomSelect #1758 (comment))

All other parts should behave as expected, so feel free to try it out.

[janno42]

my failed experiments with shouldLoad a while ago were the reason for me to pause working on the issue :)
i'm looking forward for good ideas.

do you have any concerns with the apache license? is there anything to do besides adding the license info to our license file?

[richardebeling]

I've asked the internet regarding minimum input length here: https://stackoverflow.com/q/72233401/12345551.

About the license: I don't know yet.

[niklasmohrin]

strong 👍 from me on porting this to typescript and moving into its own file :D

[richardebeling]

I gave up trying to convert the js to typescript, because our code there is heavily intertwined with tomselect stuff (e.g. we inherit from it). To use that in typescript means we have to import the tomselect class into the typescript file, which afaik can't work with the min.js file they distribute, so we'd have to add tomselect as a npm dependency, and compile/bundle it ourself, then licensing is an issue again.

[niklasmohrin]

haven't checked in browser yet, code is good though

[richardebeling]

@niklasmohrin please try again whether inputs are still broken for you.

[niklasmohrin]

Some issues on the degrees page:

• the "no results" is always shown; while it may be true, it is a bit annoying
• when adding a tag a second time (for example, try to add "master" again) and hitting enter, the form submits again

[niklasmohrin]

There is still a mention of select2 in staff_questionnaire_form

[richardebeling]

Some issues on the degrees page:

* the "no results" is always shown; while it may be true, it is a bit annoying

* when adding a tag a second time (for example, try to add "master" again) and hitting enter, the form submits again

Both essentially come from the same tomselect bug:

• When the dropdown is hidden by making it a child of a div that's not in the document, it can not have the keyboard focus. When it doesn't have the keyboard focus, hitting enter will not add the current text as a new tag, but instead submit the form instead. Should be fixed in tomselect issue 389.
  • As a solution for now, I've added the dropdown again -- but, for the tag input, there are no options available, so it would always say "no results"
  • "Enter" is then handled by the "Add [your current text]" entry in the dropdown. However, that entry is removed if you type something that already is a tag -> enter submits again.

Possible solutions:

• Wait for tomselect to fix 389, then re-evaluate
• Intercept enter on tomselect inputs, preventDefault or issue "tab" instead
• Train staff users to always use Tab instead of enter to add new tags.

[richardebeling]

TomSelect had two commits pushed today, I imagine a release will follow shortly. The commit messages claim to fix stuff:

• Removing focus from a select field should no longer scroll the page with the dropdown_input plugin (not very relevant for us anymore, we decided that we can live without it)
• orchidjs/tom-select@8ffe09a claims to have fixed the "pressing enter submits a form" bug. Will have to see how that applies for tag inputs for us, maybe we can hide the dropdown again, and not have tomselect submit the form on enter, neither for existing nor for new elements.

[janno42]

looks good so far :)