@ekzo-dev/bootstrap-addons 5.2.25 → 5.2.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.25",
+  "version": "5.2.26",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "^5.2.19",
+    "@ekzo-dev/bootstrap": "^5.2.20",
     "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -21,7 +21,9 @@
     "immutable-json-patch": "^5.1.3"
   },
   "peerDependencies": {
-    "bootstrap": "^5.2.3"
+    "aurelia": "^2.0.0-beta.8",
+    "bootstrap": "^5.2.3",
+    "@popperjs/core": "^2.11.8"
   },
   "main": "src/index.ts",
   "files": [

package/src/forms/select/select.html

@@ -45,7 +45,7 @@
       type="button"
       click.trigger="selectOption(emptyOption)"
     ></button>
-    <bs-dropdown-menu>
+    <bs-dropdown-menu popper-config.bind="popperConfig">
       <div bs-dropdown-item="text" if.bind="optionsCount > 10">
         <input class="form-control" placeholder="Filter options" type="search" value.bind="filter & debounce:250" />
       </div>
@@ -53,7 +53,8 @@
       <button
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
-        bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
+        class="dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+        disabled.bind="option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
@@ -61,10 +62,10 @@
       <template repeat.for="[k, v] of groupedOptions | filter:filter:emptyOption">
         <h6 bs-dropdown-item="header">${k}</h6>
         <button
-          class="ps-4"
           type="button"
           repeat.for="option of v"
-          bs-dropdown-item="active.bind: option.value === selectedOption?.value; disabled.bind: option.disabled"
+          class="ps-4 dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
+          disabled.bind="option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}

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

@@ -1,3 +1,4 @@
+import { BsButton, BsOffcanvas } from '@ekzo-dev/bootstrap';
 import { extractArgTypes, Meta, Story } from '@storybook/aurelia';
 
 import { selectControl } from '../../../../../.storybook/helpers';
@@ -57,5 +58,23 @@ LargeOptions.args = {
   })),
 };
 
+const InModal: Story = (args) => ({
+  props: args,
+  template: `
+<button bs-button click.trigger="offcanvas.toggle()">Open modal</button>
+<bs-offcanvas component.ref="offcanvas">
+  <bs-select value.bind="value" options.bind="options" label.bind="label" style="width: 100%"></bs-select>
+  <div style="height: 2000px"></div>
+</bs-offcanvas>`,
+  components: [BsOffcanvas, BsButton],
+});
+
+InModal.args = {
+  options: Array.from({ length: 1000 }).map((v, i) => ({
+    value: i.toString(),
+    text: `Option ${i} has long content which forces dropdown menu to scale larger that select box`,
+  })),
+};
+
 // eslint-disable-next-line
-export { Overview, Multiple, LargeOptions };
+export { Overview, Multiple, LargeOptions, InModal };

package/src/forms/select/select.ts

@@ -2,6 +2,9 @@ import template from './select.html';
 
 import './select.scss';
 
+import type { Options } from '@popperjs/core';
+import type { Tooltip } from 'bootstrap';
+
 import {
   BsCloseButton,
   BsDropdown,
@@ -11,7 +14,7 @@ import {
   BsSelect as BaseBsSelect,
   ISelectOption,
 } from '@ekzo-dev/bootstrap';
-import { bindable, customElement, ICustomElementViewModel } from 'aurelia';
+import { bindable, customElement, ICustomElementViewModel, resolve } from 'aurelia';
 
 import { Filter } from './filter';
 
@@ -29,6 +32,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   @bindable()
   emptyValue?: unknown = null;
 
+  host = resolve(HTMLElement);
+
   control!: HTMLFieldSetElement;
 
   filter: string = '';
@@ -39,6 +44,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   emptyOption?: ISelectOption;
 
+  popperConfig: Partial<Options> | Tooltip.PopperConfigFunction | null = null;
+
   binding() {
     super.binding();
     this.deactivating = false;
@@ -53,6 +60,8 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
       this.#setHeight();
       this.#scrollToSelected();
     }
+
+    this.setPopperConfig();
   }
 
   propertyChanged(name: keyof this) {
@@ -68,6 +77,24 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
     }
   }
 
+  setPopperConfig() {
+    if (this.multiple) return;
+
+    const { host } = this;
+    const parentModal = host.closest('.modal-body,.popover-body,.offcanvas-body');
+    const dropdownMenu: HTMLElement = host.querySelector('.dropdown-menu');
+
+    if (parentModal != null) {
+      this.popperConfig = {
+        strategy: 'fixed',
+      };
+      dropdownMenu.style.minWidth = `${host.offsetWidth}px`;
+    } else {
+      this.popperConfig = null;
+      dropdownMenu.style.minWidth = undefined;
+    }
+  }
+
   selectOption(option: ISelectOption) {
     this.value = option.value;
     this.#dispatchEvents();