Merge pull request #1169 from s-eckard/master

Fix style of select in input groups and fix keyboard behaviour in forms

Author: davidstutz

dist/css/bootstrap-multiselect.css

@@ -131,3 +131,25 @@ span.multiselect-native-select select {
 .form-inline .multiselect-container span.form-check {
   padding: 3px 20px 3px 40px;
 }
+.input-group.input-group-sm > .multiselect-native-select .multiselect {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding-right: 1.75rem;
+  height: calc(1.5em + 0.5rem + 2px);
+}
+.input-group > .multiselect-native-select {
+  flex: 1 1 auto;
+  width: 1%;
+}
+.input-group > .multiselect-native-select > div.btn-group {
+  width: 100%;
+}
+.input-group > .multiselect-native-select:not(:first-child) .multiselect {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.input-group > .multiselect-native-select:not(:last-child) .multiselect {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}

dist/css/bootstrap-multiselect.min.css

@@ -441,10 +441,10 @@
                 button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
                 popupContainer: '<div class="multiselect-container dropdown-menu"></div>',
                 filter: '<div class="multiselect-filter d-flex align-items-center"><i class="fas fa-sm fa-search text-muted"></i><input type="search" class="multiselect-search form-control" /></div>',
-                option: '<button class="multiselect-option dropdown-item"></button>',
+                option: '<button type="button" class="multiselect-option dropdown-item"></button>',
                 divider: '<div class="dropdown-divider"></div>',
-                optionGroup: '<button class="multiselect-group dropdown-item"></button>',
-                resetButton: '<div class="multiselect-reset text-center p-2"><button class="btn btn-sm btn-block btn-outline-secondary"></button></div>'
+                optionGroup: '<button type="button" class="multiselect-group dropdown-item"></button>',
+                resetButton: '<div class="multiselect-reset text-center p-2"><button type="button" class="btn btn-sm btn-block btn-outline-secondary"></button></div>'
             }
         },
 

dist/js/bootstrap-multiselect.js

@@ -139,3 +139,32 @@ span.multiselect-native-select select{
     padding: 3px 20px 3px 40px;
   }
 }
+
+.input-group  { 
+  &.input-group-sm > .multiselect-native-select .multiselect {
+    padding: .25rem .5rem;
+    font-size: .875rem;
+    line-height: 1.5;
+    padding-right: 1.75rem;
+    height: calc(1.5em + .5rem + 2px);
+  }
+
+  > .multiselect-native-select {
+    flex: 1 1 auto;
+    width: 1%;
+
+    > div.btn-group {
+      width: 100%;
+    }
+
+    &:not(:first-child) .multiselect {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) .multiselect {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}