Autocomplete: Add position prop

stencil-workspace/src/components.d.ts

@@ -7,13 +7,14 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ModusActionBarOptions } from "./components/modus-action-bar/modus-action-bar";
 import { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
+import { Placement } from "@popperjs/core";
 import { BadgeProperties } from "./components/modus-badge/modus-badge";
 import { Crumb } from "./components/modus-breadcrumb/modus-breadcrumb";
 import { ButtonColor, ButtonSize, ButtonStyle, ButtonType } from "./components/modus-button/modus-button.models";
 import { ButtonGroupSelectionType } from "./components/modus-button-group/modus-button-group.models";
 import { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRowAction, ModusDataTableRowActionClickEvent, ModusDataTableSelectionOptions, ModusDataTableSortEvent, ModusDataTableSortOptions, TCell, TColumn, TRow } from "./components/modus-data-table/modus-data-table.models";
 import { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models";
-import { Placement } from "@floating-ui/dom";
+import { Placement as Placement1 } from "@floating-ui/dom";
 import { ModusIconName } from "./icons/ModusIconUtilities";
 import { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 import { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models";
@@ -31,13 +32,14 @@ import { TreeItemSelectionChange, TreeViewItemInfo, TreeViewItemOptions } from "
 import { ModusActionBarOptions as ModusActionBarOptions1 } from "./components/modus-action-bar/modus-action-bar";
 export { ModusActionBarOptions } from "./components/modus-action-bar/modus-action-bar";
 export { ModusAutocompleteOption } from "./components/modus-autocomplete/modus-autocomplete";
+export { Placement } from "@popperjs/core";
 export { BadgeProperties } from "./components/modus-badge/modus-badge";
 export { Crumb } from "./components/modus-breadcrumb/modus-breadcrumb";
 export { ButtonColor, ButtonSize, ButtonStyle, ButtonType } from "./components/modus-button/modus-button.models";
 export { ButtonGroupSelectionType } from "./components/modus-button-group/modus-button-group.models";
 export { ModusDataTableCellLink, ModusDataTableDisplayOptions, ModusDataTableRowAction, ModusDataTableRowActionClickEvent, ModusDataTableSelectionOptions, ModusDataTableSortEvent, ModusDataTableSortOptions, TCell, TColumn, TRow } from "./components/modus-data-table/modus-data-table.models";
 export { ModusDateInputEventDetails, ModusDateInputType } from "./components/modus-date-input/utils/modus-date-input.models";
-export { Placement } from "@floating-ui/dom";
+export { Placement as Placement1 } from "@floating-ui/dom";
 export { ModusIconName } from "./icons/ModusIconUtilities";
 export { ModusNavbarApp } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 export { ModusNavbarButton, ModusNavbarDropdownItem, ModusNavbarDropdownOptions, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink, ModusNavbarTooltip, ModusProfileMenuOptions } from "./components/modus-navbar/modus-navbar.models";
@@ -199,6 +201,10 @@ export namespace Components {
           * The autocomplete's input placeholder.
          */
         "placeholder": string;
+        /**
+          * (optional) The placement of the options
+         */
+        "position": Placement;
         /**
           * Whether the autocomplete is read-only.
          */
@@ -584,7 +590,7 @@ export namespace Components {
         /**
           * (optional) The placement of the calendar popup
          */
-        "position": Placement | 'auto' | 'auto-start' | 'auto-end';
+        "position": Placement1 | 'auto' | 'auto-start' | 'auto-end';
     }
     interface ModusDivider {
     }
@@ -3181,6 +3187,10 @@ declare namespace LocalJSX {
           * The autocomplete's input placeholder.
          */
         "placeholder"?: string;
+        /**
+          * (optional) The placement of the options
+         */
+        "position"?: Placement;
         /**
           * Whether the autocomplete is read-only.
          */
@@ -3610,7 +3620,7 @@ declare namespace LocalJSX {
         /**
           * (optional) The placement of the calendar popup
          */
-        "position"?: Placement | 'auto' | 'auto-start' | 'auto-end';
+        "position"?: Placement1 | 'auto' | 'auto-start' | 'auto-end';
     }
     interface ModusDivider {
     }

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.scss

@@ -120,7 +120,12 @@
     margin: 0;
     padding: 0;
     position: absolute;
-    width: 100%;
+    width: auto;
+
+    &[data-popper-reference-hidden] {
+      pointer-events: none;
+      visibility: hidden;
+    }
 
     .icon-check {
       display: inline-flex;

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.spec.ts

@@ -21,7 +21,7 @@ describe('modus-autocomplete', () => {
             <modus-text-input aria-autocomplete="list" aria-controls="${listId}" class="input" role="combobox" autocomplete="off" size="medium" type="search"  value=""></modus-text-input>
           </div>
           <div class="error"></div>
-          <div class="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto;">
+          <div class="options-container" part="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto; position: absolute; left: 0; top: 0; margin: 0;">
             <ul aria-label="options" id="${listId}" role="listbox"></ul>
           </div>
           <div style="display: none;">
@@ -57,7 +57,7 @@ describe('modus-autocomplete', () => {
             <modus-text-input aria-autocomplete="list" aria-controls="${listId}" class="input" role="combobox" autocomplete="off" size="medium" type="search"  value=""></modus-text-input>
           </div>
           <div class="error"></div>
-          <div class="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto;">
+          <div class="options-container" part="options-container" style="max-height: 300px; z-index: 1; overflow-y: auto; position: absolute; left: 0; top: 0; margin: 0;">
             <ul aria-label="options" id="${listId}" role="listbox"></ul>
           </div>
           <div style="display: none;">

stencil-workspace/src/components/modus-autocomplete/modus-autocomplete.tsx

@@ -16,6 +16,7 @@ import {
 import { IconSearch } from '../../icons/svgs/icon-search';
 import { generateElementId } from '../../utils/utils';
 import { IconCheck } from '../../icons/generated-icons/IconCheck';
+import { createPopper, Instance, Placement } from '@popperjs/core';
 import { IconClose } from '../../icons/svgs/icon-close';
 
 export interface ModusAutocompleteOption {
@@ -76,6 +77,9 @@ export class ModusAutocomplete {
   /** A promise that returns the filtered options. */
   @Prop() filterOptions: (search: string) => Promise<ModusAutocompleteOption[] | string[]>;
 
+  /** (optional) The placement of the options */
+  @Prop() position: Placement = 'bottom-start';
+
   /** An array to hold the selected chips. */
   @State() selectedChips: ModusAutocompleteOption[] = [];
 
@@ -88,6 +92,8 @@ export class ModusAutocomplete {
   /** Whether to show autocomplete's options when focus. */
   @Prop() showOptionsOnFocus: boolean;
 
+  private popperInstance: Instance;
+
   @Watch('options')
   watchOptions() {
     this.convertOptions();
@@ -148,6 +154,58 @@ export class ModusAutocomplete {
   @State() ShowItemsOnKeyDown = false;
   private listId = generateElementId() + '_list';
 
+  private resizeObserver: ResizeObserver;
+
+  componentDidLoad(): void {
+    this.convertOptions();
+    if (this.multiple) {
+      this.initializeSelectedChips();
+    }
+    this.initializePopper();
+
+    const chipsContainer = this.el.shadowRoot.querySelector('.chips-container');
+    if (chipsContainer && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.popperInstance) {
+          this.popperInstance.update();
+        }
+      });
+      this.resizeObserver.observe(chipsContainer);
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+
+  initializePopper(): void {
+    const optionsContainer = this.el.shadowRoot.querySelector(`.options-container`) as HTMLElement;
+    const referenceElement = this.el.shadowRoot.querySelector(`.chips-container`) as HTMLElement;
+
+    this.popperInstance = createPopper(referenceElement, optionsContainer, {
+      placement: this.position,
+      strategy: this.position === 'bottom' ? 'fixed' : 'absolute',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 2],
+          },
+        },
+      ],
+    });
+
+    if (referenceElement.offsetWidth && optionsContainer) {
+      optionsContainer.style.width = `${referenceElement.offsetWidth}px`;
+    }
+  }
+
   componentWillLoad(): void {
     this.convertOptions();
     if (this.multiple) {
@@ -520,7 +578,7 @@ export class ModusAutocomplete {
     const selectedOption = optionList.querySelector('li.selected') as HTMLElement;
 
     if (selectedOption) {
-      selectedOption.scrollIntoView({ behavior: 'smooth', inline: 'nearest' });
+      selectedOption.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
   };
 
@@ -589,6 +647,7 @@ export class ModusAutocomplete {
         <div class={'error'}>{this.errorText ? <label class="sub-text error">{this.errorText}</label> : null}</div>
         <div
           class="options-container"
+          part="options-container"
           style={{ maxHeight: this.dropdownMaxHeight, zIndex: this.dropdownZIndex, overflowY: 'auto' }}>
           <ul id={this.listId} aria-label="options" role="listbox">
             {this.displayOptions() &&