@ekzo-dev/bootstrap-addons 5.2.11 → 5.2.13

package/package.json

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

package/src/forms/select/select.html

@@ -25,18 +25,23 @@
   </fieldset>
   <template else>
     <input
+      id.bind="id"
       class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
       bs-dropdown-toggle="arrow.bind: false"
-      value="${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text}"
+      value="${selectedOption?.group ? selectedOption.group + ' / ' : ''}${selectedOption?.text ?? ''}"
       disabled.bind="disabled"
       required.bind="required"
-      readonly
+      form.bind="form & attr"
+      name.bind="name & attr"
+      title.bind="title & attr"
+      autocomplete.bind="autocomplete & attr"
+      keydown.trigger="$event.preventDefault()"
     />
     <bs-dropdown-menu>
-      <div bs-dropdown-item="text" if.bind="options.length > 10">
+      <div bs-dropdown-item="text" if.bind="optionsCount > 10">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
       </div>
-      <hr bs-dropdown-item="divider" if.bind="options.length > 10" />
+      <hr bs-dropdown-item="divider" if.bind="optionsCount > 10" />
       <button
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter"

package/src/forms/select/select.ts

@@ -10,8 +10,7 @@ import {
   BsSelect as BaseBsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { coerceBoolean } from '@ekzo-dev/toolkit';
-import { bindable, customElement, ICustomElementViewModel } from 'aurelia';
+import { customElement, ICustomElementViewModel } from 'aurelia';
 
 import { Filter } from './filter';
 
@@ -26,13 +25,12 @@ const BS_SIZE_MULTIPLIER = {
   dependencies: [BsDropdown, BsDropdownMenu, BsDropdownToggle, BsDropdownItem, Filter],
 })
 export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
-  @bindable(coerceBoolean)
-  resetUnknownValue: boolean = true;
-
   control!: HTMLFieldSetElement;
 
   filter: string = '';
 
+  optionsCount: number = 0;
+
   attached() {
     if (this.multiple) {
       this.#setHeight();
@@ -89,18 +87,25 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       options = Object.entries(options);
     }
 
-    const option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
-      const val: unknown = Array.isArray(option) ? option[0] : (option as ISelectOption).value;
+    this.optionsCount = (options as []).length;
+
+    const isEntries = Array.isArray(options[0]);
+    let option = (options as Array<ISelectOption | readonly [unknown, string]>).find((option) => {
+      const currentValue: unknown = isEntries ? option[0] : (option as ISelectOption).value;
 
-      return matcher ? matcher(value, val) : value === val;
+      return matcher ? matcher(value, currentValue) : value === currentValue;
     });
 
-    // reset value next tick if needed
-    if (option === undefined && value !== undefined && this.resetUnknownValue) {
-      console.info('[bootstrap-addons] resetting <bs-select> unknown value');
-      void Promise.resolve().then(() => (this.value = undefined));
+    option = isEntries && option !== undefined ? { value: option[0], text: option[1] } : (option as ISelectOption);
+
+    // update value next tick if it differs from current
+    const foundValue = option?.value;
+
+    if (foundValue !== value) {
+      console.info(`[bootstrap-addons] updating <bs-select> [id=${this.id}] value to`, foundValue);
+      void Promise.resolve().then(() => (this.value = foundValue));
     }
 
-    return Array.isArray(option) ? { value: option[0], text: option[1] } : (option as ISelectOption);
+    return option;
   }
 }