From 7ece1a48fa267c7f38ec3263e0fe524f9588750c Mon Sep 17 00:00:00 2001
From: raedbrahem <raed@dev1.space>
Date: Mon, 12 Oct 2026 11:16:22 +0100
Subject: [PATCH] fix(filters): initialize Select2 on multiselect filter fields

The Select2 initialization in filter_js_snippet.html only targeted
'.similar-filters select[multiple]', a class that exists solely on the
similar-findings panel of the finding view. Every other filter panel
(findings list, products, engagements, metrics, ...) rendered its
multiselect filters as native <select multiple> elements, and the fixed
height set by '.dojo-filter-set .form-control' clipped them to a single
visible option row.

- Initialize Select2 on all '.dojo-filter-set select[multiple]' fields,
  skipping tagulous widgets (which initialize themselves) and fields
  that are already initialized (the snippet can be included more than
  once on a page).
- Guard on $.fn.select2, since Select2 is only loaded through the
  tagulous form media and is absent on filter pages without tag fields.
- Let native multiselects grow (height: auto) so pages without Select2
  still show a usable list instead of a single clipped row.

Fixes #16110

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 dojo/static/dojo/css/dojo.css              |  2 ++
 dojo/templates/dojo/filter_js_snippet.html | 13 ++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/dojo/static/dojo/css/dojo.css b/dojo/static/dojo/css/dojo.css
index 16c473f858d..e7c5d0a8906 100644
--- a/dojo/static/dojo/css/dojo.css
+++ b/dojo/static/dojo/css/dojo.css
@@ -1289,6 +1289,8 @@ span.endpoint_product {
 .dojo-filter-set select[multiple],
 .dojo-filter-set select[multiple=multiple] {
     width: 100%;
+    /* override the fixed .form-control height, which would clip the list to a single option row */
+    height: auto;
     min-height: 2.125rem;
     max-height: 5rem;
     font-size: 0.8125rem;
diff --git a/dojo/templates/dojo/filter_js_snippet.html b/dojo/templates/dojo/filter_js_snippet.html
index f7910326f5a..e50441295aa 100644
--- a/dojo/templates/dojo/filter_js_snippet.html
+++ b/dojo/templates/dojo/filter_js_snippet.html
@@ -3,9 +3,16 @@
 <script type="application/javascript">
     $(function () {
         $(function () {
-            $('.similar-filters select[multiple]').not('[data-tagulous]').each(function () {
-                $(this).select2();
-            })
+            // Select2 is only available when a tagulous widget pulled it in via form.media,
+            // so leave the native multiselect in place when it is not loaded.
+            if ($.fn.select2) {
+                $('.dojo-filter-set select[multiple], .similar-filters select[multiple]')
+                    .not('[data-tagulous]')
+                    .not('.select2-hidden-accessible')
+                    .each(function () {
+                        $(this).select2();
+                    })
+            }
             $('input[data-tagulous]').each(function () {
                 Tagulous.select2($(this))
             })