@ekzo-dev/bootstrap-addons 5.2.8 → 5.2.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.8",
+  "version": "5.2.9",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",

package/src/forms/select/select.html

@@ -1,4 +1,4 @@
-<template class="${floatingLabel ? 'form-floating' : ''}">
+<template class="${floatingLabel ? 'form-floating' : ''} ${!multiple ? 'dropdown' : ''}">
   <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <fieldset
     if.bind="multiple"
@@ -23,18 +23,18 @@
       <label class="form-check-label" for="${id+$index}">${option.text}</label>
     </div>
   </fieldset>
-  <div else bs-dropdown>
-    <button
+  <template else>
+    <input
       class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
-      type="button"
       bs-dropdown-toggle="arrow.bind: false"
+      value="${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text}"
       disabled.bind="disabled"
-    >
-      ${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? '&nbsp;'}
-    </button>
+      required.bind="required"
+      readonly
+    />
     <bs-dropdown-menu>
       <div bs-dropdown-item="text">
-        <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
+        <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:200" />
       </div>
       <hr bs-dropdown-item="divider" />
       <button
@@ -43,7 +43,7 @@
         bs-dropdown-item="active.bind: option === selectedOption; disabled.bind: option.disabled"
         click.trigger="selectOption(option)"
       >
-        ${option.text}
+        ${option.text || '&nbsp;'}
       </button>
       <template repeat.for="[k, v] of groupedOptions | filter:filter">
         <h6 bs-dropdown-item="header">${k}</h6>
@@ -54,11 +54,11 @@
           bs-dropdown-item="active.bind: option === selectedOption; disabled.bind: option.disabled"
           click.trigger="selectOption(option)"
         >
-          ${option.text}
+          ${option.text || '&nbsp;'}
         </button>
       </template>
     </bs-dropdown-menu>
-  </div>
+  </template>
   <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>

package/src/forms/select/select.scss

@@ -8,20 +8,16 @@
 bs-select {
   display: block;
 
-  .form-select {
-    text-align: left;
+  > .form-select {
+    cursor: default;
   }
 
-  bs-dropdown-menu {
+  > bs-dropdown-menu {
     width: 100%;
     max-height: 100vh;
     overflow-y: auto;
   }
 
-  .search {
-    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
-  }
-
   > .form-control {
     overflow: auto;
     position: relative;
@@ -40,7 +36,7 @@ bs-select {
     }
   }
 
-  &.form-floating {
+  &.form-floating:not(.dropdown) {
     > label {
       height: auto;
       width: auto;

package/src/forms/select/select.stories.ts

@@ -15,6 +15,7 @@ export default {
   args: {
     label: 'Label',
     options: [
+      { value: undefined, text: '' },
       { value: '1', text: 'One', disabled: true },
       { value: '2', text: 'Two' },
       { value: '3', text: 'Three', group: 'Group' },

package/src/forms/select/select.ts

@@ -97,7 +97,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
     // reset value next tick if needed
     if (option === undefined && value !== undefined && this.resetUnknownValue) {
-      Promise.resolve().then(() => (this.value = undefined));
+      console.info('[bootstrap-addons] resetting <bs-select> unknown value');
+      void Promise.resolve().then(() => (this.value = undefined));
     }
 
     return Array.isArray(option) ? { value: option[0], text: option[1] } : (option as ISelectOption);