Initialize selectpicker via stimulus controller.

assets/controllers/elements/selectpicker_controller.js

@@ -0,0 +1,12 @@
+import {Controller} from "@hotwired/stimulus";
+import "bootstrap-select";
+import 'bootstrap-select/dist/css/bootstrap-select.css'
+
+export default class extends Controller {
+    connect() {
+        $(this.element).selectpicker({
+            dropdownAlignRight: 'auto',
+            container: '#content',
+        });
+    }
+}

assets/js/app.js

@@ -45,6 +45,9 @@ import "./datatables";
 //import "./tab_remember";
 import "./register_events";
 
+//Define jquery globally
+window.$ = window.jQuery = require("jquery")
+
 /**
 
  require('bootstrap-select');
@@ -52,8 +55,7 @@ require('jquery-form');
 require('corejs-typeahead/dist/typeahead.bundle.min');
 window.Bloodhound =  require('corejs-typeahead/dist/bloodhound.js');
 
-//Define jquery globally
+;
-window.$ = window.jQuery = require("jquery");
 
 
 

assets/js/register_events.js

@@ -1,11 +1,10 @@
 'use strict';
 
 //CSS
-import 'bootstrap-select/dist/css/bootstrap-select.css'
 import "bootstrap-fileinput/css/fileinput.css"
 
 //JS
-import "bootstrap-select";
+
 import "./lib/jquery.tristate"
 import "bootstrap-fileinput";
 
@@ -24,8 +23,6 @@ const RegisterEventHelper = class {
 
         this.registerTriStateCheckboxes();
 
-        this.registerBootstrapSelectPicker();
-
         this.registerSpecialCharInput();
         this.registerHoverPics();
 
@@ -99,16 +96,7 @@ const RegisterEventHelper = class {
             });
         })
     }
-
+    
-    registerBootstrapSelectPicker() {
-        this.registerLoadHandler(() => {
-            $(".selectpicker").selectpicker({
-                dropdownAlignRight: 'auto',
-                container: '#content',
-            });
-        });
-    }
-
     registerAutocompleteTagsinput() {
         this.registerLoadHandler(() => {
             $('input.tagsinput').each(function() {

src/Form/AdminPages/CurrencyAdminForm.php

@@ -69,6 +69,7 @@ class CurrencyAdminForm extends BaseEntityAdminForm
             'preferred_choices' => ['EUR', 'USD', 'GBP', 'JPY', 'CNY'],
             'attr' => [
                 'class' => 'selectpicker',
+                'data-controller' => 'elements--selectpicker',
                 'title' => 'selectpicker.nothing_selected',
                 'data-live-search' => true,
             ],

src/Form/LabelOptionsType.php

@@ -95,6 +95,7 @@ class LabelOptionsType extends AbstractType
             },
             'attr' => [
                 'class' => 'selectpicker',
+                'data-controller' => 'elements--selectpicker',
                 'title' => 'selectpicker.nothing_selected',
                 'data-live-search' => true,
             ],

src/Form/Part/PartLotType.php

@@ -82,6 +82,7 @@ class PartLotType extends AbstractType
             'disable_not_selectable' => true,
             'attr' => [
                 'class' => 'selectpicker form-control-sm',
+                'data-controller' => 'elements--selectpicker',
                 'title' => 'selectpicker.nothing_selected',
                 'data-live-search' => true,
             ],

src/Form/Type/MasterPictureAttachmentType.php

@@ -63,6 +63,7 @@ class MasterPictureAttachmentType extends AbstractType
             'choice_translation_domain' => false,
             'attr' => [
                 'class' => 'selectpicker',
+                'data-controller' => 'elements--selectpicker',
                 'title' => 'selectpicker.nothing_selected',
             ],
             'choice_attr' => static function (Options $options) {

src/Form/Type/StructuralEntityType.php

@@ -117,6 +117,7 @@ class StructuralEntityType extends AbstractType
         $resolver->setDefault('attr', static function (Options $options) {
             $tmp = [
                 'class' => 'selectpicker',
+                'data-controller' => 'elements--selectpicker',
                 'data-live-search' => true,
                 'title' => 'selectpicker.nothing_selected',
             ];

src/Form/UserAdminForm.php

@@ -150,6 +150,7 @@ class UserAdminForm extends AbstractType
                 'required' => false,
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                     'title' => 'selectpicker.nothing_selected',
                     'data-live-search' => true,
                 ],
@@ -162,6 +163,7 @@ class UserAdminForm extends AbstractType
                 'required' => false,
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                     'title' => 'selectpicker.nothing_selected',
                     'data-live-search' => true,
                 ],
@@ -178,6 +180,7 @@ class UserAdminForm extends AbstractType
                 },
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                     'title' => 'selectpicker.nothing_selected',
                 ],
                 'choice_translation_domain' => false,

src/Form/UserSettingsType.php

@@ -99,6 +99,7 @@ class UserSettingsType extends AbstractType
                 'required' => false,
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                     'data-live-search' => true,
                 ],
                 'placeholder' => 'user_settings.language.placeholder',
@@ -110,6 +111,7 @@ class UserSettingsType extends AbstractType
                 'required' => false,
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                     'data-live-search' => true,
                 ],
                 'placeholder' => 'user_settings.timezone.placeholder',
@@ -121,6 +123,7 @@ class UserSettingsType extends AbstractType
                 'required' => false,
                 'attr' => [
                     'class' => 'selectpicker',
+                    'data-controller' => 'elements--selectpicker',
                 ],
                 'choice_translation_domain' => false,
                 'choices' => User::AVAILABLE_THEMES,

templates/AdminPages/_attachments.html.twig

@@ -107,7 +107,6 @@
         $holder.append($newFormRow);
 
         //Reinit the selectpickers
-        $(".selectpicker").selectpicker();
         $(".file").fileinput();
 
         //Reinit typeahead:

templates/Parts/edit/_attachments.html.twig

@@ -104,8 +104,6 @@
 
         $holder.append($newFormRow);
 
-        //Reinit the selectpickers
-        $(".selectpicker").selectpicker();
         $(".file").fileinput();
 
         //Reinit typeahead:

templates/Parts/edit/_lots.html.twig

@@ -55,8 +55,5 @@
 
         $holder.append($newFormRow);
 
-        //Reinit the selectpickers
-        $(".selectpicker").selectpicker();
-
     }
 </script>

templates/Parts/edit/_orderdetails.html.twig

@@ -52,10 +52,6 @@
         $("#" + min_discount_id).val(new_min_amount);
         $("#" + price_related_id).val("1");
 
-
-        //Reinit the selectpickers
-        $(".selectpicker").selectpicker();
-
     }
 
     function delete_orderdetail_entry(btn) {
@@ -77,9 +73,5 @@
         newForm = newForm.replace(/__name__/g, index);
 
         $holder.children("tbody").append(newForm);
-
-        //Reinit the selectpickers
-        $(".selectpicker").selectpicker();
-
     }
 </script>

templates/Parts/edit/edit_form_styles.html.twig

@@ -7,7 +7,7 @@
             <div class="input-group input-group-sm">
                 {{ form_widget(form.price) }}
                 <div class="input-group-append">
-                    {{ form_widget(form.currency, {'attr': {'class': 'selectpicker form-control-sm'}}) }}
+                    {{ form_widget(form.currency, {'attr': {'class': 'selectpicker form-control-sm', 'data-controller': 'elements--selectpicker'}}) }}
                 </div>
             </div>
             {{ form_errors(form.price) }}

templates/Parts/lists/_parts_list.html.twig

@@ -9,7 +9,7 @@
         {# <span id="select_count"></span> #}
         <span class="badge badge-secondary">{% trans with {'%count%': '<span id="select_count"></span>'} %}part_list.action.part_count{% endtrans %}</span>
 
-        <select class="selectpicker" name="action" id="select_action"
+        <select class="selectpicker" name="action" id="select_action" data-controller="elements--selectpicker"
                 title="{% trans %}part_list.action.action.title{% endtrans %}" onchange="updateTargetSelect()" required>
             <optgroup label="{% trans %}part_list.action.action.group.favorite{% endtrans %}">
                 <option {% if not is_granted('@parts.edit') %}disabled{% endif %} value="favorite">{% trans %}part_list.action.action.favorite{% endtrans %}</option>