4120: Removed use of select2 and cleaned up templates

Author: rimi-itk

assets/app.js

@@ -5,13 +5,3 @@
  * which should already be in your base.html.twig.
  */
 import './styles/app.css';
-
-import jquery from 'jquery';
-const $ = jquery;
-window.$ = $;
-
-import once from 'jquery-once';
-
-import "select2/dist/css/select2.min.css";
-import select2 from 'select2';
-select2($);

assets/styles/app.css

@@ -217,17 +217,3 @@ body.list table tbody td.dashboard--table-answer {
         }
     }
 }
-
-.select2 {
-    .select2-container--default,
-    .select2-selection--multiple {
-        min-height: 38px !important;
-        border-color: var(--bs-border-color) !important;
-        font-size: 1rem;
-        line-height: 1.25;
-
-        textarea {
-            color: var(--bs-body-color) !important;
-        }
-    }
-}

importmap.php

@@ -16,50 +16,4 @@
         'path' => './assets/app.js',
         'entrypoint' => true,
     ],
-    'jquery' => [
-        'version' => '3.7.1',
-    ],
-    'select2' => [
-        'version' => '4.1.0-rc.0',
-    ],
-    'select2/dist/css/select2.min.css' => [
-        'version' => '4.1.0-rc.0',
-        'type' => 'css',
-    ],
-    'region-align' => [
-        'version' => '2.1.3',
-    ],
-    'object-assign' => [
-        'version' => '3.0.0',
-    ],
-    'escape-html' => [
-        'version' => '1.0.3',
-    ],
-    'to-style' => [
-        'version' => '1.3.3',
-    ],
-    'react-style-normalizer' => [
-        'version' => '1.2.8',
-    ],
-    'clone' => [
-        'version' => '1.0.4',
-    ],
-    'matches-selector' => [
-        'version' => '1.2.0',
-    ],
-    'contains' => [
-        'version' => '0.1.1',
-    ],
-    'region' => [
-        'version' => '2.1.2',
-    ],
-    'hasown' => [
-        'version' => '1.0.1',
-    ],
-    'newify' => [
-        'version' => '1.1.9',
-    ],
-    'jquery-once' => [
-        'version' => '2.3.0',
-    ],
 ];

package.json

@@ -413,6 +413,9 @@ private function getFilterFormBuilder(
             'multiple' => true,
             'attr' => [
                 'class' => 'form-control',
+                // @todo Find documentation reference for why setting data-ea-widget actually works
+                // (https://github.com/search?q=repo%3AEasyCorp%2FEasyAdminBundle%20data-ea-widget&type=code)
+                'data-ea-widget' => 'ea-autocomplete',
                 'data-placeholder' => $this->translator->trans(
                     'filter.placeholder.groups'
                 ),
@@ -426,6 +429,7 @@ private function getFilterFormBuilder(
             'choices' => $subownerOptions,
             'attr' => [
                 'class' => 'form-control',
+                'data-ea-widget' => 'ea-autocomplete',
             ],
             'required' => false,
             'disabled' => 0 == count($subownerOptions),
@@ -440,6 +444,7 @@ private function getFilterFormBuilder(
                 ),
                 'attr' => [
                     'class' => 'form-control',
+                    'data-ea-widget' => 'ea-autocomplete',
                 ],
                 'required' => false,
                 'data' => $formParameters['theme'] ?? null,
@@ -454,6 +459,7 @@ private function getFilterFormBuilder(
                 ),
                 'attr' => [
                     'class' => 'form-control',
+                    'data-ea-widget' => 'ea-autocomplete',
                 ],
                 'required' => false,
                 'data' => $formParameters['category'] ?? null,
@@ -466,6 +472,7 @@ private function getFilterFormBuilder(
                 'choices' => $filterSelfServiceOptions,
                 'attr' => [
                     'class' => 'form-control',
+                    'data-ea-widget' => 'ea-autocomplete',
                 ],
                 'required' => false,
                 'data' => $formParameters['self_service'] ?? null,

src/Controller/Admin/CustomDashboardCrudController.php

@@ -113,23 +113,20 @@
 {% endblock main %}
 
 {% block body_javascript %}
-  {# // Called more than once, so we need to check if it's already been called ?! #}
   {{ parent() }}
 
-  <script type="text/javascript">
-      document.addEventListener("DOMContentLoaded", function() {
-        $('#form_groups').once('select-processed').each(function () {
-          let groups = $('#form_groups');
-          groups.select2();
-          groups.on('select2:opening select2:closing', function (event) {
-            let searchField = $(this).parent().find('.select2-search__field');
-            searchField.prop('disabled', true);
-          });
-        });
-
-        $('.dashboard-filters select').bind('change', function () {
-          $('.dashboard-filters form').submit();
-        });
-      }, { once: true });
+  <script>
+    {# Subowner options depend on selected groups, so we submit the form when groups are changed to reflect the new subowners. #}
+    addEventListener('load', () => {
+      const el = document.getElementById('form_groups')
+      if (el) {
+        el.addEventListener('change', (event) => {
+          const form = event.target.form
+          if (form) {
+            form.submit()
+          }
+        })
+      }
+    })
   </script>
 {% endblock %}