Merge pull request #341 from FriendsOfCake/js-error

Fix JS error

Author: ADmad

config/asset_compress.ini

@@ -1,15 +1,15 @@
 [crudview.css]
 files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
 files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/flatpickr.min.css
-files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css
+files[]=https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css
 files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css
 files[]=plugin:CrudView:css/local.css
 
 [crudview_head.js]
 files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
-files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js
+files[]=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
 files[]=https://cdn.jsdelivr.net/npm/[email protected]
-files[]=https://cdn.jsdelivr.net/npm/select2@4.0
+files[]=https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
 files[]=https://cdn.jsdelivr.net/npm/[email protected]/jquery.dirtyforms.min.js
 
 [crudview.js]

webroot/js/local.js

@@ -20,7 +20,7 @@ var CrudView = {
     select2: function (selector) {
         $(selector).each(function () {
             var $this = $(this),
-                config = {theme: 'bootstrap4'};
+                config = {theme: 'bootstrap-5'};
 
             if (!$this.prop('multiple') && $this.find('option:first').val() === '') {
                 config.allowClear = true;
@@ -36,7 +36,7 @@ var CrudView = {
             var $ele = $(ele);
 
             $ele.select2({
-                theme: 'bootstrap4',
+                theme: 'bootstrap-5',
                 minimumInputLength: 1,
                 ajax: {
                     delay: 250,
@@ -82,20 +82,9 @@ var CrudView = {
         $('form[data-dirty-check=1]').dirtyForms();
     },
 
-    dropdown: function () {
-        $('.dropdown-toggle').dropdown();
-
-        // recommended hack to get dropdowns correctly work inside responsive table
-        $('.table-responsive').on('show.bs.dropdown', function () {
-            $('.table-responsive').css( "overflow", "inherit" );
-        });
-        $('.table-responsive').on('hide.bs.dropdown', function () {
-            $('.table-responsive').css( "overflow", "auto" );
-        })
-    },
-
     tooltip: function () {
-        $('[data-toggle="tooltip"]').tooltip();
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
     },
 
     initialize: function () {
@@ -104,7 +93,6 @@ var CrudView = {
         this.select2('select[multiple]:not(.no-select2), select.select2');
         this.autocomplete('input.autocomplete, select.autocomplete');
         this.dirtyForms();
-        this.dropdown();
         this.tooltip();
     }
 };