Open jvendetti opened 6 months ago
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 (https://github.com/orchidjs/tom-select/issues/561), and the proposed solutions are either upgrading to Bootstrap 5.3.2 (didn't work for everyone), or migrating to Dart Sass.
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
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.
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 JSUncaught TypeError
.This will also put us in better alignment with AgroPortal (currently using tom-select).