Close dropdown on clear button click in Bootstrap 5

snapappointments · Sep 22, 2024 · 8e8dad8 · 8e8dad8
1 parent 939e94b
commit 8e8dad8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>