diff --git a/js/forms/custom-elements/tom-select.js b/js/forms/custom-elements/tom-select.js
new file mode 100644
index 000000000..e4531a795
--- /dev/null
+++ b/js/forms/custom-elements/tom-select.js
@@ -0,0 +1,9 @@
+class TomSelectElement extends HTMLSelectElement {
+ connectedCallback() {
+ new TomSelect(this, {
+
+ });
+ }
+}
+
+customElements.define('tom-select-element', TomSelectElement, {extends: 'select'});
diff --git a/package-lock.json b/package-lock.json
index deced16e5..4831f6e00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"dependencies": {
"@cityssm/fa5-power-transforms-css": "github:cityssm/fa5-power-transforms-css",
"@fontsource/raleway": "^4.5.0",
+ "@hotwired/turbo": "^8.0.5",
"@popperjs/core": "^2.11.8",
"@ungap/custom-elements": "^1.3.0",
"ace-builds": "^1.32.7",
@@ -49,6 +50,27 @@
"resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-4.5.0.tgz",
"integrity": "sha512-Rzj90wbZQnNzazqzoiu5HzMEMdqMJLUVFOo699sinTXrZRm1aB5iX2HTiK2VlPnH4M6u8yYnJ7CebOyamfWlqw=="
},
+ "node_modules/@hotwired/turbo": {
+ "version": "8.0.5",
+ "resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-8.0.5.tgz",
+ "integrity": "sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ==",
+ "engines": {
+ "node": ">= 14"
+ }
+ },
+ "node_modules/@orchidjs/sifter": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
+ "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
+ "dependencies": {
+ "@orchidjs/unicode-variants": "^1.1.2"
+ }
+ },
+ "node_modules/@orchidjs/unicode-variants": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
+ "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA=="
+ },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -339,6 +361,24 @@
"resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-4.5.0.tgz",
"integrity": "sha512-Rzj90wbZQnNzazqzoiu5HzMEMdqMJLUVFOo699sinTXrZRm1aB5iX2HTiK2VlPnH4M6u8yYnJ7CebOyamfWlqw=="
},
+ "@hotwired/turbo": {
+ "version": "8.0.5",
+ "resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-8.0.5.tgz",
+ "integrity": "sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ=="
+ },
+ "@orchidjs/sifter": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
+ "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
+ "requires": {
+ "@orchidjs/unicode-variants": "^1.1.2"
+ }
+ },
+ "@orchidjs/unicode-variants": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
+ "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA=="
+ },
"@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
diff --git a/package.json b/package.json
index c30131610..e596d79a6 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"dependencies": {
"@cityssm/fa5-power-transforms-css": "github:cityssm/fa5-power-transforms-css",
"@fontsource/raleway": "^4.5.0",
+ "@hotwired/turbo": "^8.0.5",
"@popperjs/core": "^2.11.8",
"@ungap/custom-elements": "^1.3.0",
"ace-builds": "^1.32.7",
diff --git a/sources/Application/WebPage/iTopWebPage.php b/sources/Application/WebPage/iTopWebPage.php
index 6b184ebfc..eab0c6789 100644
--- a/sources/Application/WebPage/iTopWebPage.php
+++ b/sources/Application/WebPage/iTopWebPage.php
@@ -181,6 +181,8 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
$this->LinkScriptFromAppRoot('js/selectize.min.js');
$this->LinkScriptFromAppRoot('node_modules/selectize-plugin-a11y/selectize-plugin-a11y.js');
$this->LinkScriptFromAppRoot('js/jquery.multiselect.js');
+ $this->LinkScriptFromAppRoot('node_modules/tom-select/dist/js/tom-select.complete.min.js');
+ $this->LinkScriptFromAppRoot('js/forms/custom-elements/tom-select.js');
// Used by inline image, CKEditor and other places
$this->LinkScriptFromAppRoot('node_modules/magnific-popup/dist/jquery.magnific-popup.min.js');
@@ -267,6 +269,8 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
// Used by external keys and other drop down lists
$this->LinkStylesheetFromAppRoot('css/selectize.default.css');
+ $this->LinkStylesheetFromAppRoot('node_modules/tom-select/dist/css/tom-select.bootstrap5.css');
+
}
/**
diff --git a/templates/application/forms/itop_console_layout.html.twig b/templates/application/forms/itop_console_layout.html.twig
index 186f34a46..3df4f6264 100644
--- a/templates/application/forms/itop_console_layout.html.twig
+++ b/templates/application/forms/itop_console_layout.html.twig
@@ -23,7 +23,22 @@
{%- block choice_widget_collapsed -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input')|trim}) %}
- {{- parent() -}}
+
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_expanded -%}
diff --git a/templates/base/components/turbo-form/layout.html.twig b/templates/base/components/turbo-form/layout.html.twig
index 83fdd7450..8a8ff339d 100644
--- a/templates/base/components/turbo-form/layout.html.twig
+++ b/templates/base/components/turbo-form/layout.html.twig
@@ -2,9 +2,9 @@
{# @license http://opensource.org/licenses/AGPL-3.0 #}