@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -40,6 +40,7 @@ import type { VirtualOption, NileRemoveEvent, RenderItemConfig } from './types.j
 import { VirtualSelectSelectionManager } from './selection-manager.js';
 import { VirtualSelectSearchManager } from './search-manager.js';
 import { VirtualSelectRenderer } from './renderer.js';
+import { PortalManager } from './portal-manager.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 
 /**
@@ -107,8 +108,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     'help-text',
     'label'
   );
+  private readonly portalManager = new PortalManager(this);
 
   @query('.select') popup: NilePopup;
+  @query('.select__combobox') combobox: HTMLElement;
   @query('.select__display-input') displayInput: HTMLInputElement;
   @query('.select__value-input') valueInput: HTMLInputElement;
   @query('.virtualized') virtualizedContainer: HTMLElement;
@@ -247,6 +250,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Disable width synchronization */
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
+  /** 
+   * When true, the listbox will be appended to the document body instead of the parent container.
+   * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+   */
+  @property({ type: Boolean, reflect: true }) portal = false;
+
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
@@ -256,6 +265,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @state() oldMaxOptionsVisible: number = 1;
   @state() showListbox: boolean = false;
+  @state() private wasShowSelectedCheckedOnClose: boolean = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -286,6 +296,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       clearTimeout(this.scrollTimeout);
       this.scrollTimeout = undefined;
     }
+    // Clean up body append elements
+    this.portalManager.cleanupPortalAppend();
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -343,6 +355,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     this.handleWindowError = this.handleWindowError.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.handleWindowScroll = this.handleWindowScroll.bind(this);
   }
 
   private addOpenListeners(): void {
@@ -350,6 +364,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
     window.addEventListener('error', this.handleWindowError);
+    
+    if (this.portal) {
+      window.addEventListener('resize', this.handleWindowResize);
+      window.addEventListener('scroll', this.handleWindowScroll, true);
+    }
   }
 
   private removeOpenListeners(): void {
@@ -357,6 +376,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
     window.removeEventListener('error', this.handleWindowError);
+    window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('scroll', this.handleWindowScroll, true);
   }
 
   private handleFocus(): void {
@@ -374,8 +395,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath(); 
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
 
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitPortalAppend) {
       this.hide();
     }
   }
@@ -437,8 +459,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     const path = event.composedPath();
     const hitSelf  = path.includes(this);
     const hitPopup = this.popup && path.includes(this.popup);
+    const hitPortalAppend = this.portal && this.portalManager.portalContainerElement && path.includes(this.portalManager.portalContainerElement);
   
-    if (!hitSelf && !hitPopup) {
+    if (!hitSelf && !hitPopup && !hitPortalAppend) {
       this.hide();
     }
   };
@@ -456,6 +479,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  private handleWindowResize = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
+  private handleWindowScroll = (): void => {
+    this.portalManager.updatePortalAppendPosition();
+  };
+
   private handleFooterClick(event: MouseEvent): void {
     event.stopPropagation();
     event.preventDefault();
@@ -479,6 +510,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.data = [...this.originalOptionItems];
     }
 
+    // Reset measured height when show selected toggles (content height may change)
+    this.portalManager.resetMeasuredHeight();
+
     this.requestUpdate();
     this.repaintOptionsContainer();
   }
@@ -702,6 +736,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
       this.repaintOptionsContainer();
+      
+    // Reset measured height when search changes (content height may change)
+    this.portalManager.resetMeasuredHeight();
     }
   }
   
@@ -791,6 +828,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   handleValueChange(): void {
     this.selectionChanged();
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.portal && this.portalManager.portalContainerElement) {
+      this.portalManager.updatePortalAppendPosition();
+    }
   }
 
   @watch('data', { waitUntilFirstUpdate: true })
@@ -798,6 +840,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
       this.originalOptionItems = [...this.data];
     }
+
+    if(this.data.length > 0 && this.open && this.searchValue) {
+      this.originalOptionItems = [...this.originalOptionItems, ...this.data];
+    }
     
     this.selectionChanged();
     // Show no results message when data is empty and not loading
@@ -807,6 +853,14 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = false;
     }
     this.requestUpdate();
+    
+    // Reset measured height when data changes (content height may change)
+    this.portalManager.resetMeasuredHeight();
+    
+    // Update body append content if it's active
+    if (this.portal && this.portalManager.portalContainerElement) {
+      this.portalManager.updatePortalAppendPosition();
+    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -824,6 +878,22 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.showNoResults = true;
     }
     this.requestUpdate();
+    
+    // Update body append content if it's active
+    if (this.portal && this.portalManager.portalContainerElement) {
+      this.portalManager.updatePortalAppendPosition();
+    }
+  }
+
+  @watch('portal', { waitUntilFirstUpdate: true })
+  handlePortalAppendChange(): void {
+    if (this.open) {
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      } else {
+        this.portalManager.cleanupPortalAppend();
+      }
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })
@@ -831,9 +901,17 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     if (this.open && !this.disabled) {
       await this.handleOpen();
       this.showListbox = true;
+      
+      if (this.portal) {
+        this.portalManager.setupPortalAppend();
+      }
     } else {
       await this.handleClose();
       this.showListbox = false;
+      
+      if (this.portal) {
+        this.portalManager.cleanupPortalAppend();
+      }
     }
   }
 
@@ -850,6 +928,12 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     });
     await animateTo(this.popup.popup, keyframes, options);
 
+    if (this.wasShowSelectedCheckedOnClose) {
+      this.showSelected = false;
+      this.data = [...this.originalOptionItems];
+      this.wasShowSelectedCheckedOnClose = false;
+    }
+
     this.initializeOriginalItems();
     this.filterVirtualOptions(this.searchValue);
     this.resetScrollPosition();
@@ -860,6 +944,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.emit('nile-hide', { value: this.value, name: this.name });
     this.removeOpenListeners();
 
+    this.wasShowSelectedCheckedOnClose = this.showSelected;
+
     await stopAnimations(this);
     const { keyframes, options } = getAnimation(this, 'select.hide', {
       dir: 'ltr',
@@ -868,6 +954,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.popup.active = false;
 
     this.searchValue = '';
+    
+    // Reset measured height when popup closes (content may change on next open)
+    this.portalManager.resetMeasuredHeight();
+    
     this.emit('nile-after-hide', { value: this.value, name: this.name });
   }
 
@@ -1010,10 +1100,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
           'select--large': this.size === 'large',
         })}
         placement=${this.placement}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        strategy=${this.portal ? 'fixed' : (this.hoist ? 'fixed' : 'absolute')}
         distance="6"
-        flip
-        shift
+        ?flip=${!this.portal}
+        ?shift=${!this.portal}
         sync=${ifDefined(!this.noWidthSync ? 'width' : undefined)}
         auto-size="vertical"
         auto-size-padding="10"
@@ -1219,9 +1309,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
         part="listbox"
         class="select__listbox ${this.searchEnabled
           ? 'select__search-enabled '
-          : ''}"
+          : ''} ${this.portal ? 'select__portal-append-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.handleOptionClick}
+        style=${this.portal ? 'display: none;' : ''}
       >
         ${this.renderSearch()}
         ${this.renderLoader()}
@@ -1425,6 +1516,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       }
     });
   }
+
 }
 
 setDefaultAnimation('select.show', {

package/src/nile-virtual-select/portal-manager.ts

@@ -0,0 +1,427 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { 
+  autoUpdate, 
+  computePosition, 
+  flip, 
+  offset, 
+  shift, 
+  size, 
+  platform,
+  type Placement,
+  type MiddlewareData,
+  type ComputePositionConfig,
+  type Boundary
+} from '@floating-ui/dom';
+import { PortalUtils } from '../nile-select/portal-utils';
+
+export class PortalManager {
+  private portalContainer: HTMLElement | null = null;
+  private originalListboxParent: HTMLElement | null = null;
+  private measuredPopupHeight: number | null = null;
+  private component: any;
+  private cleanupAutoUpdate: (() => void) | null = null;
+  private currentPlacement: Placement = 'bottom';
+  private currentMiddlewareData: MiddlewareData | null = null;
+
+  constructor(component: any) {
+    this.component = component;
+  }
+
+  private createPortalAppendContainer(): HTMLElement {
+    const container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.zIndex = '9999';
+    container.style.pointerEvents = 'none';
+    container.className = 'nile-virtual-select-portal-append';
+    return container;
+  }
+
+  positionPortalAppend(): void {
+    if (!this.portalContainer || !this.component.popup) return;
+
+    this.measurePopupHeight();
+    this.computeFloatingUIPosition();
+  }
+
+  private measurePopupHeight(): void {
+    if (this.measuredPopupHeight || !this.portalContainer) return;
+
+    // Temporarily position the container to measure its height
+    this.portalContainer.style.position = 'absolute';
+    this.portalContainer.style.visibility = 'hidden';
+    this.portalContainer.style.top = '0px';
+    this.portalContainer.style.left = '0px';
+    
+    // Force a reflow to ensure the container is rendered
+    this.portalContainer.offsetHeight;
+    
+    // Measure the actual height
+    this.measuredPopupHeight = this.portalContainer.offsetHeight;
+    
+    // Reset visibility
+    this.portalContainer.style.visibility = '';
+  }
+
+
+  private async computeFloatingUIPosition(): Promise<void> {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.combobox || this.component;
+    const floatingElement = this.portalContainer;
+
+    try {
+      const { x, y, placement, middlewareData } = await this.calculateFloatingUIPosition(
+        referenceElement,
+        floatingElement
+      );
+
+      this.applyFloatingUIPosition(floatingElement, referenceElement, x, y, placement, middlewareData);
+
+    } catch (error) {
+      console.warn('Floating UI positioning failed, falling back to simple positioning:', error);
+      this.fallbackPositioning();
+    }
+  }
+
+  private async calculateFloatingUIPosition(
+    referenceElement: HTMLElement,
+    floatingElement: HTMLElement
+  ): Promise<{ x: number; y: number; placement: Placement; middlewareData: MiddlewareData }> {
+    const boundary = PortalUtils.findBoundaryElements(referenceElement);
+    const initialPlacement = PortalUtils.getOptimalPlacement(referenceElement);
+    const middleware = this.createFloatingUIMiddleware(boundary);
+
+    return await computePosition(referenceElement, floatingElement, {
+      placement: initialPlacement,
+      strategy: 'fixed',
+      middleware,
+      platform: this.createCustomPlatform()
+    });
+  }
+
+  private createFloatingUIMiddleware(boundary: Element[] | undefined): ComputePositionConfig['middleware'] {
+    return [
+      offset(4),
+      size({
+        apply: this.handleSizeMiddleware.bind(this),
+        padding: 10,
+        boundary: boundary
+      }),
+      flip({
+        fallbackPlacements: ['bottom', 'top', 'bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        fallbackStrategy: 'bestFit',
+        padding: 10,
+        boundary: boundary
+      }),
+      shift({
+        padding: 10,
+        crossAxis: true,
+        boundary: boundary
+      })
+    ];
+  }
+
+  private handleSizeMiddleware({ availableWidth, availableHeight, elements, rects }: {
+    availableWidth: number;
+    availableHeight: number;
+    elements: { floating: HTMLElement };
+    rects: { reference: { x: number; y: number; width: number; height: number } };
+  }): void {
+    const maxHeight = PortalUtils.calculateOptimalHeight(
+      rects.reference,
+      window.innerHeight,
+      this.currentPlacement
+    );
+
+    elements.floating.style.maxWidth = `${availableWidth}px`;
+    elements.floating.style.maxHeight = `${maxHeight}px`;
+    
+    elements.floating.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
+    elements.floating.style.setProperty('--auto-size-available-height', `${maxHeight}px`);
+  }
+
+  private createCustomPlatform() {
+    return platform;
+  }
+
+  private applyFloatingUIPosition(
+    floatingElement: HTMLElement,
+    referenceElement: HTMLElement,
+    x: number,
+    y: number,
+    placement: Placement,
+    middlewareData: MiddlewareData
+  ): void {
+    Object.assign(floatingElement.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      position: 'fixed',
+      pointerEvents: 'auto'
+    });
+
+    this.currentPlacement = placement;
+    this.currentMiddlewareData = middlewareData;
+    
+    PortalUtils.applyCollisionData(floatingElement, middlewareData, placement);
+    
+    const placementClass = placement.split('-')[0];
+    floatingElement.className = `nile-virtual-select-portal-append select__listbox--${placementClass}`;
+
+    const referenceRect = (referenceElement as HTMLElement).getBoundingClientRect();
+    floatingElement.style.width = `${referenceRect.width}px`;
+  }
+
+  private fallbackPositioning(): void {
+    if (!this.portalContainer) return;
+
+    const referenceElement = this.component.combobox || this.component;
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const popupHeight = this.measuredPopupHeight || 200;
+    
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    let topPosition: number;
+    let placementClass: string;
+    let maxHeight: number;
+    
+    if (spaceAbove > spaceBelow) {
+      maxHeight = Math.max(spaceAbove - 20, 100);
+      topPosition = Math.max(rect.top - maxHeight - 4, 10);
+      placementClass = 'top';
+    } else {
+      maxHeight = Math.max(spaceBelow - 20, 100);
+      topPosition = rect.bottom + 4;
+      placementClass = 'bottom';
+    }
+
+    this.portalContainer.style.left = `${rect.left}px`;
+    this.portalContainer.style.top = `${topPosition}px`;
+    this.portalContainer.style.width = `${rect.width}px`;
+    this.portalContainer.style.maxHeight = `${maxHeight}px`;
+    this.portalContainer.style.pointerEvents = 'auto';
+    this.portalContainer.className = `nile-virtual-select-portal-append select__listbox--${placementClass}`;
+    
+    this.calculateAndSetAutoSizeProperties(rect, topPosition, placementClass);
+  }
+
+  private calculateAndSetAutoSizeProperties(rect: DOMRect, topPosition: number, placementClass: string): void {
+    if (!this.portalContainer) return;
+
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    
+    let availableHeight: number;
+    if (placementClass === 'top') {
+      availableHeight = rect.top - 10;
+    } else {
+      availableHeight = viewportHeight - rect.bottom - 10;
+    }
+    
+    const availableWidth = Math.min(rect.width, viewportWidth - rect.left - 10);
+    
+    this.portalContainer.style.setProperty('--auto-size-available-height', `${Math.max(availableHeight, 100)}px`);
+    this.portalContainer.style.setProperty('--auto-size-available-width', `${Math.max(availableWidth, 200)}px`);
+  }
+
+  updatePortalAppendPosition(): void {
+    if (this.component.portal && this.portalContainer) {
+      this.positionPortalAppend();
+    }
+  }
+
+  handleWindowResize(): void {
+    if (this.component.portal && this.portalContainer) {
+      this.positionPortalAppend();
+    }
+  }
+
+  private setupAutoUpdatePositioning(): void {
+    if (!this.portalContainer || !this.component) return;
+
+    this.cleanupAutoUpdatePositioning();
+
+    this.cleanupAutoUpdate = autoUpdate(
+      this.component,
+      this.portalContainer,
+      () => {
+        this.computeFloatingUIPosition();
+      },
+      {
+        ancestorScroll: true,
+        ancestorResize: true,
+        elementResize: true,
+        layoutShift: true,
+        animationFrame: true
+      }
+    );
+  }
+
+  private cleanupAutoUpdatePositioning(): void {
+    if (this.cleanupAutoUpdate) {
+      this.cleanupAutoUpdate();
+      this.cleanupAutoUpdate = null;
+    }
+  }
+
+  private extractStylesAsCSS(styles: any): string {
+    if (typeof styles === 'string') {
+      return styles;
+    }
+    
+    if (Array.isArray(styles)) {
+      return styles.map(style => this.extractStylesAsCSS(style)).join('\n');
+    }
+    
+    if (styles && typeof styles === 'object' && styles.cssText) {
+      return styles.cssText;
+    }
+    
+    return '';
+  }
+
+  private injectStylesToDocument(): void {
+    if (!this.portalContainer) return;
+
+    // Create a unique identifier for this component instance
+    const styleId = `nile-virtual-select-styles-${Math.random().toString(36).substring(2, 11)}`;
+    
+    // Check if styles are already injected
+    if (document.getElementById(styleId)) return;
+
+    // Get the component's styles
+    const componentStyles = (this.component.constructor as any).styles;
+    if (!componentStyles) return;
+
+    // Create a style element
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = this.extractStylesAsCSS(componentStyles);
+    
+    // Inject into document head
+    document.head.appendChild(styleElement);
+    
+    // Store reference for cleanup
+    (this.portalContainer as any).__injectedStyleId = styleId;
+  }
+
+  private adoptStylesToPortalAppend(): void {
+    if (!this.portalContainer) return;
+    this.injectStylesToDocument();
+  }
+
+  setupPortalAppend(): void {
+    if (!this.component.portal) return;
+
+    this.component.updateComplete.then(() => {
+      const listbox = this.component.shadowRoot?.querySelector('#listbox') as HTMLElement;
+      if (listbox) {
+        this.originalListboxParent = listbox.parentElement as HTMLElement;
+        
+        this.portalContainer = this.createPortalAppendContainer();
+        this.portalContainer.appendChild(listbox);
+        document.body.appendChild(this.portalContainer);
+        
+        // Adopt the component's styles to the body append container
+        this.adoptStylesToPortalAppend();
+        
+        listbox.style.display = '';
+        this.positionPortalAppend();
+        
+        this.setupAutoUpdatePositioning();
+        
+        window.addEventListener('resize', this.handleWindowResize.bind(this));
+      }
+    });
+  }
+
+  cleanupPortalAppend(): void {
+    this.cleanupAutoUpdatePositioning();
+    
+    if (this.portalContainer && this.portalContainer.parentNode) {
+      const listbox = this.portalContainer.querySelector('#listbox') as HTMLElement;
+      
+      if (listbox && this.originalListboxParent) {
+        this.originalListboxParent.appendChild(listbox);
+        listbox.style.display = this.component.portal ? 'none' : '';
+      }
+      
+      // Clean up injected styles if they exist
+      const injectedStyleId = (this.portalContainer as any).__injectedStyleId;
+      if (injectedStyleId) {
+        const styleElement = document.getElementById(injectedStyleId);
+        if (styleElement) {
+          styleElement.remove();
+        }
+      }
+      
+      this.portalContainer.parentNode.removeChild(this.portalContainer);
+    }
+    
+    window.removeEventListener('resize', this.handleWindowResize.bind(this));
+    
+    this.portalContainer = null;
+    this.originalListboxParent = null;
+    this.measuredPopupHeight = null;
+    this.currentPlacement = 'bottom';
+    this.currentMiddlewareData = null;
+  }
+
+  get portalContainerElement(): HTMLElement | null {
+    return this.portalContainer;
+  }
+
+  resetMeasuredHeight(): void {
+    this.measuredPopupHeight = null;
+  }
+
+  forceReposition(): void {
+    if (this.portalContainer) {
+      this.computeFloatingUIPosition();
+    }
+  }
+
+  getCurrentPlacement(): Placement {
+    return this.currentPlacement;
+  }
+
+  getCurrentMiddlewareData(): MiddlewareData | null {
+    return this.currentMiddlewareData;
+  }
+
+  isUsingFloatingUI(): boolean {
+    return this.cleanupAutoUpdate !== null;
+  }
+
+  handleViewportChange(): void {
+    if (this.portalContainer) {
+      this.resetMeasuredHeight();
+      this.forceReposition();
+    }
+  }
+
+  isPositioningOptimal(): boolean {
+    if (!this.portalContainer || !this.currentMiddlewareData) return true;
+
+    const referenceElement = this.component.combobox || this.component;
+    const rect = referenceElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    const isAbove = this.currentPlacement.startsWith('top');
+    const isBelow = this.currentPlacement.startsWith('bottom');
+    
+    if (isAbove && spaceBelow > spaceAbove) return false;
+    if (isBelow && spaceAbove > spaceBelow) return false;
+    
+    return true;
+  }
+}

package/src/nile-virtual-select/renderer.ts

@@ -67,6 +67,9 @@ export class VirtualSelectRenderer {
     getDisplayText?: (item: any) => string,
     getItemValue?: (item: any) => string
   ): TemplateResult {
+    if(!item) {
+      return html``;
+    }
     const displayTextFn = getDisplayText || renderItemFunction;
     const valueFn = getItemValue || ((item: any) => item?.value || item);