Autocomplete: Add position prop

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

@@ -89,6 +89,11 @@
     position: absolute;
     width: 100%;
 
+    &[data-popper-reference-hidden] {
+      pointer-events: none;
+      visibility: hidden;
+    }
+
     .icon-check {
       display: inline-flex;
       margin-left: auto;

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

@@ -15,6 +15,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';
 
 export interface ModusAutocompleteOption {
   id: string;
@@ -74,6 +75,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[] = [];
 
@@ -86,6 +90,8 @@ export class ModusAutocomplete {
   /** Whether to show autocomplete's options when focus. */
   @Prop() showOptionsOnFocus: boolean;
 
+  private popperInstance: Instance;
+
   @Watch('options')
   watchOptions() {
     this.convertOptions();
@@ -138,6 +144,38 @@ export class ModusAutocomplete {
   @State() ShowItemsOnKeyDown = false;
   private listId = generateElementId() + '_list';
 
+  componentDidLoad(): void {
+    this.convertOptions();
+    if (this.multiple) {
+      this.initializeSelectedChips();
+    }
+    this.initializePopper();
+  }
+
+  disconnectedCallback(): void {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+  }
+
+  initializePopper(): void {
+    const optionsContainer = this.el.shadowRoot.querySelector(`.options-container`) as HTMLElement;
+    const referenceElement = this.el as HTMLElement;
+
+    this.popperInstance = createPopper(referenceElement, optionsContainer, {
+      placement: 'bottom-start',
+      strategy: this.position === 'auto' ? 'fixed' : 'absolute',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 2],
+          },
+        },
+      ],
+    });
+  }
+
   componentWillLoad(): void {
     this.convertOptions();
     if (this.multiple) {
@@ -477,7 +515,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' });
     }
   };
 
@@ -527,6 +565,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() &&

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.scss

@@ -43,6 +43,10 @@ table.density-compact {
   z-index: 99;
 }
 
+.autocomplete::part(options-container) {
+  width: auto;
+}
+
 .editor::part(input-container) {
   border: 2px solid var(--modus-input-border-active-color, #217cbb);
   border-radius: unset;

stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-editor/modus-table-cell-editor.tsx

@@ -192,6 +192,7 @@ export class ModusTableCellEditor {
           {...this.getDefaultProps('Autocomplete input')}
           include-search-icon="false"
           size="medium"
+          class="autocomplete"
           options={options}
           onBlur={this.handleBlur}
           onKeyDown={(e) => e.stopPropagation()}
@@ -212,6 +213,7 @@ export class ModusTableCellEditor {
               this.editedValue = selectedDetail;
             }
           }}
+          position="auto"
           value={selectedOption}></modus-autocomplete>
       </div>
     );