From 8e8dad80054307f915d639d38fa802e81f29f606 Mon Sep 17 00:00:00 2001
From: megumi_imai <megumi_imai@FO-1273.local>
Date: Mon, 23 Sep 2024 01:14:40 +0900
Subject: [PATCH] Close dropdown on clear button click in Bootstrap 5

---
 js/bootstrap-select.js |  4 ++++
 tests/bootstrap4.html  | 13 +++++++++++++
 tests/bootstrap5.html  | 13 +++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/js/bootstrap-select.js b/js/bootstrap-select.js
index 7055df413..ebb7f1699 100644
--- a/js/bootstrap-select.js
+++ b/js/bootstrap-select.js
@@ -2663,6 +2663,10 @@
 
           that.createView(false);
         }
+        // toggle to close the dropdown if it is currently open
+        if (version.major > 4 && that.$menu.hasClass(classNames.SHOW)) {
+          that.$menu.removeClass(classNames.SHOW);
+        }
       }
 
       this.$button.on('click.bs.dropdown.data-api', function (e) {
diff --git a/tests/bootstrap4.html b/tests/bootstrap4.html
index 282800c00..cc2022df9 100644
--- a/tests/bootstrap4.html
+++ b/tests/bootstrap4.html
@@ -326,6 +326,19 @@
       </select>
     </div>
   </div>
+
+  <hr>
+  <div class="form-group row">
+    <label class="col-lg-4 control-label">allow clear and prevent menu open</label>
+    <div class="col-lg-8">
+      <select id="allow-clear" class="selectpicker" data-allow-clear="true">
+        <option>One</option>
+        <option>Two</option>
+        <option>Three</option>
+      </select>
+    </div>
+  </div>
+
 </div>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
diff --git a/tests/bootstrap5.html b/tests/bootstrap5.html
index 88a67abb8..4d4c220d4 100644
--- a/tests/bootstrap5.html
+++ b/tests/bootstrap5.html
@@ -336,6 +336,19 @@ <h5>Set the title attribute on options to display alternative text when the opti
       </select>
     </div>
   </div>
+
+  <hr>
+  <div class="form-group row">
+    <label class="col-lg-4 control-label">allow clear and prevent menu open</label>
+    <div class="col-lg-8">
+      <select id="allow-clear" class="selectpicker" data-allow-clear="true">
+        <option>One</option>
+        <option>Two</option>
+        <option>Three</option>
+      </select>
+    </div>
+  </div>
+
 </div>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>