From ca914657d99e79a4fc9bfd46c1d17b2156d08276 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 27 May 2021 17:51:18 -0400
Subject: [PATCH] Select2 - Move collapsible feature from Api4Explorer to
 Common.js for reusability in SearchKit

---
 css/api4-explorer.css | 16 ----------------
 css/civicrm.css       | 16 ++++++++++++++++
 js/Common.js          | 34 +++++++++++++++++++++++++++++-----
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index d2bd350647..02dd6dbadf 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -152,22 +152,6 @@
   padding: 5px 10px;
 }
 
-/* Collapsible optgroups for select2 */
-div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children:not(.optgroup-expanded) > .select2-result-sub > li.select2-result {
-  display: none;
-}
-div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children > .select2-result-label:before {
-  font-family: FontAwesome;
-  content: "\f0da";
-  display: inline-block;
-  padding-right: 3px;
-  vertical-align: middle;
-  font-weight: normal;
-}
-div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children.optgroup-expanded > .select2-result-label:before {
-  content: "\f0d7";
-}
-
 #bootstrap-theme.api4-explorer-page .form-control.huge {
   width: 25em;
 }
diff --git a/css/civicrm.css b/css/civicrm.css
index 775346a855..c91c5a000c 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3111,6 +3111,22 @@ tbody.scrollContent tr.alternateRow {
   box-sizing: border-box;
 }
 
+/* Collapsible optgroups for select2 */
+div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children:not(.optgroup-expanded) > .select2-result-sub > li.select2-result {
+  display: none;
+}
+div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children > .select2-result-label:before {
+  font-family: FontAwesome;
+  content: "\f0da";
+  display: inline-block;
+  padding-right: 3px;
+  vertical-align: middle;
+  font-weight: normal;
+}
+div.select2-drop.collapsible-optgroups-enabled .select2-result-with-children.optgroup-expanded > .select2-result-label:before {
+  content: "\f0d7";
+}
+
 span.crm-select-item-color {
   display: inline-block;
   width: .8em;
diff --git a/js/Common.js b/js/Common.js
index 86f02567bf..c17432bb7f 100644
--- a/js/Common.js
+++ b/js/Common.js
@@ -474,12 +474,36 @@ if (!CRM.vars) CRM.vars = {};
         };
       }
 
-      // Use description as title for each option
-      $el.on('select2-loaded.crmSelect2', function() {
-        $('.crm-select2-row-description', '#select2-drop').each(function() {
-          $(this).closest('.select2-result-label').attr('title', $(this).text());
+      $el
+        .on('select2-loaded.crmSelect2', function() {
+          // Use description as title for each option
+          $('.crm-select2-row-description', '#select2-drop').each(function() {
+            $(this).closest('.select2-result-label').attr('title', $(this).text());
+          });
+          // Collapsible optgroups should be expanded when searching
+          if ($('#select2-drop.collapsible-optgroups-enabled .select2-search input.select2-input').val()) {
+            $('#select2-drop.collapsible-optgroups-enabled li.select2-result-with-children')
+              .addClass('optgroup-expanded');
+          }
+        })
+        // Handle collapsible optgroups
+        .on('select2-open', function(e) {
+          var isCollapsible = $(e.target).hasClass('collapsible-optgroups');
+          $('#select2-drop')
+            .off('.collapseOptionGroup')
+            .toggleClass('collapsible-optgroups-enabled', isCollapsible);
+          if (isCollapsible) {
+            $('#select2-drop')
+              .on('click.collapseOptionGroup', '.select2-result-with-children > .select2-result-label', function() {
+                $(this).parent().toggleClass('optgroup-expanded');
+              })
+              // If the first item in the list is an optgroup, expand it
+              .find('li.select2-result-with-children:first-child').addClass('optgroup-expanded');
+          }
+        })
+        .on('select2-close', function() {
+          $('#select2-drop').off('.collapseOptionGroup').removeClass('collapsible-optgroups-enabled');
         });
-      });
 
       // Defaults for single-selects
       if ($el.is('select:not([multiple])')) {
-- 
2.25.1