Merge branch 'main' of https://github.com/ghiscoding/multiple-select-vanilla

Author: ghiscoding

demo/src/options/options02.html

@@ -23,9 +23,9 @@ <h2 class="bd-title">
 
 <div>
   <div class="mb-3 row">
-    <label class="col-sm-2"> Basic Select </label>
+    <label class="col-sm-3">Basic Select</label>
 
-    <div class="col-sm-10">
+    <div class="col-sm-9">
       <select class="full-width">
         <option value="1">First</option>
         <option value="2">Second</option>
@@ -36,9 +36,9 @@ <h2 class="bd-title">
   </div>
 
   <div class="mb-3 row">
-    <label class="col-sm-2"> Group Select </label>
+    <label class="col-sm-3">Group Select</label>
 
-    <div class="col-sm-10">
+    <div class="col-sm-9">
       <select class="full-width">
         <optgroup label="Group 1">
           <option value="1">Option 1</option>
@@ -58,4 +58,17 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-3">Single Select with Empty Option</label>
+
+    <div class="col-sm-9">
+      <select class="multiple-select full-width">
+        <option value=""></option>
+        <option value="2">Second</option>
+        <option value="3">Third</option>
+        <option value="4">Fourth</option>
+      </select>
+    </div>
+  </div>
 </div>

lib/src/MultipleSelectInstance.ts

@@ -906,7 +906,7 @@ export class MultipleSelectInstance {
 
     const spanElm = this.choiceElm?.querySelector<HTMLSpanElement>('span');
     const sl = valueSelects.length;
-    let html = '';
+    let html = null;
 
     const getSelectOptionHtml = () => {
       if (this.options.useSelectOptionLabel || this.options.useSelectOptionLabelToHtml) {
@@ -934,7 +934,7 @@ export class MultipleSelectInstance {
         html = getSelectOptionHtml();
       }
 
-      if (html) {
+      if (html !== null) {
         spanElm?.classList.remove('ms-placeholder');
         if (this.options.useSelectOptionLabelToHtml) {
           spanElm.innerHTML = this.options.sanitizer ? this.options.sanitizer(html) : html;

lib/src/styles/_variables.scss

@@ -41,6 +41,7 @@ $ms-drop-list-item-disabled-filter: Alpha(Opacity = 35) !default;
 $ms-drop-list-item-disabled-opacity: 0.35 !default;
 $ms-drop-zindex: 1050 !default;
 $ms-label-margin-bottom: 0 !default;
+$ms-label-min-height: 1.25rem !default;
 $ms-label-padding: 0 0 0 1.25rem !default;
 $ms-ok-button-bg-color: #fff !default;
 $ms-ok-button-bg-hover-color: #f9f9f9 !default;

lib/src/styles/multiple-select.scss

@@ -249,6 +249,7 @@
         position: relative;
         white-space: nowrap;
         margin-bottom: var(--ms-label-margin-bottom, $ms-label-margin-bottom);
+        min-height: var(--ms-label-min-height, $ms-label-min-height);
         padding: var(--ms-label-padding, $ms-label-padding);
 
         &.optgroup {