Migrate from Select2 and Chosen to tom-select

[jvendetti]

Replace all usages of Select2 and Chosen with tom-select. Chosen is deprecated, and the select2-rails gem that we use to pull in Select2 is no longer maintained.

The allowClear functionality in Select2 has stopped working. This can be seen on the AnnotatorPlus page under advanced options. Clicking on the 'x' button in any of the select boxes to clear the contents results in a JS Uncaught TypeError.

This will also put us in better alignment with AgroPortal (currently using tom-select).

[jvendetti]

I had planned to start this migration as part of the work on adding a natural language selector to the ontology submission form, but initial attempts to integrate tom-select result in:

SassC::SyntaxError in Submissions#edit

Error: "var(--ts-pr-caret)" is not a number for `max'
        on line 227:10 of node_modules/tom-select/dist/css/tom-select.css, in function `max`
        from line 227:10 of node_modules/tom-select/dist/css/tom-select.css
        from line 39:9 of app/assets/stylesheets/application.css.scss
>>   right: max(var(--ts-pr-caret), 8px);

   ---------^

This error is present with both the normal tom-select:

@import "tom-select/dist/css/tom-select";

... and the Bootstrap 5 tom-select:

@import "tom-select/dist/css/tom-select.bootstrap5";

This is an open issue in tom-select (orchidjs/tom-select#561), and the proposed solutions are either upgrading to Bootstrap 5.3.2 (didn't work for everyone), or migrating to Dart Sass.

[syphax-bouazzouni]

In Agroportal we import only this

Can you try it and tell us if it did work?

And here is the PR that we did in our side, we integrated it for inspiration

• Feature: update select component ontoportal-lirmm/bioportal_web_ui#310

[jvendetti]

Thanks for the comment, but none of the permutations work.

tom-select.scss:

SassC::SyntaxError: Error: "var(--ts-pr-min)" is not a number for `max'
        on line 104:17 of node_modules/tom-select/dist/scss/tom-select.scss, in function `max`
        from line 104:17 of node_modules/tom-select/dist/scss/tom-select.scss
        from line 39:9 of app/assets/stylesheets/application.css.scss
>> 	padding-right:	max( var(--ts-pr-min), calc( var(--ts-pr-clear-button) + var
   ----------------^
/Users/vendetti/Development/GitHub/ncbo/bioportal_web_ui/node_modules/tom-select/dist/scss/tom-select.scss:104

tom-select.bootstrap5.scss:

SassC::SyntaxError: Error: Undefined variable: "$form-validation-states".
        on line 6:23 of node_modules/tom-select/dist/scss/tom-select.bootstrap5.scss
        from line 39:9 of app/assets/stylesheets/application.css.scss
>> $state-valid: map-get($form-validation-states,'valid') !default;

   ----------------------^
/Users/vendetti/Development/GitHub/ncbo/bioportal_web_ui/node_modules/tom-select/dist/scss/tom-select.bootstrap5.scss:6

I'll need to look at the other proposed solutions when I have time.