Close dropdown on clear button click in Bootstrap 5

Author: megumi_imai

Diff for: 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 for: 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 for: 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>