@ekzo-dev/bootstrap-addons 5.2.13 → 5.2.15

package/package.json

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

package/src/forms/select/select.scss

@@ -12,13 +12,16 @@ bs-select {
     cursor: default;
   }
 
-  > bs-dropdown-menu {
-    width: 100%;
+  .dropdown-menu {
+    width: max-content;
+    min-width: 100%;
+    max-width: 100vw;
     max-height: 50vh;
     overflow-y: auto;
   }
 
-  .dropdown-item {
+  .dropdown-item,
+  .dropdown-header {
     white-space: normal;
   }
 

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

@@ -45,12 +45,13 @@ Multiple.args = {
 
 const LargeOptions: Story = (args) => ({
   props: args,
+  template: '<bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 400px"></bs-select>',
 });
 
 LargeOptions.args = {
   options: Array.from({ length: 1000 }).map((v, i) => ({
-    value: i,
-    text: `Option ${i}`,
+    value: i.toString(),
+    text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
   })),
 };
 

package/src/forms/select/select.ts

@@ -31,6 +31,16 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   optionsCount: number = 0;
 
+  deactivating: boolean = false;
+
+  binding() {
+    this.deactivating = false;
+  }
+
+  unbinding() {
+    this.deactivating = true;
+  }
+
   attached() {
     if (this.multiple) {
       this.#setHeight();
@@ -80,6 +90,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get selectedOption(): ISelectOption | undefined {
+    if (this['__raw__'].deactivating) return;
+
     const { matcher, value } = this;
     let { options } = this;