@aquera/nile-elements 1.0.4-beta-1.2 → 1.0.4-beta-1.4

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

@@ -40,6 +40,7 @@ import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
 import NileOptionGroup from '../nile-option-group/nile-option-group';
 import { GroupAttributes } from './nile-select.interface';
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -120,6 +121,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   private scrollTimeout: number | undefined;
   private scrolling = false;
   private options: NileOption[] = [];
+  private resizeController?: ResizeController;
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -191,6 +193,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ attribute: true, reflect: true }) helpText = '';
   @property({ attribute: 'help-text', reflect: true }) help_text = '';
+  @property({ type: Boolean, attribute: true, reflect: true }) autoResize = false;
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -274,6 +277,9 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** To auto focus the search input when the select is opened */
   @property({ type: Boolean, reflect: true, attribute: true }) autoFocusSearch = false;
 
+  /** loading indicator for virtual select */
+  @property({ type: Boolean, reflect: true, attribute: true }) loading = false;
+
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -315,10 +321,30 @@ export class NileSelect extends NileElement implements NileFormControl{
     this.emit('nile-destroy');
   }
 
+  private setupResizeObserver() {
+    if (this.autoResize) {
+      const tagsContainer = this.shadowRoot?.querySelector('.select__tags');
+      if (tagsContainer) {
+        this.resizeController = new ResizeController(this, {
+          callback: () => this.calculateTotalWidthOfTags()
+        });
+        this.resizeController.observe(tagsContainer);
+      }
+    } else {
+      this.resizeController?.unobserve?.(
+        this.shadowRoot?.querySelector('.select__tags') as Element
+      );
+      this.resizeController = undefined;
+    }
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
+    if (_changedProperties.has('autoResize')) {
+      this.setupResizeObserver();
+    }
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
@@ -326,6 +352,7 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.handleGroupSearchChange();
     }
 
+    this.setupResizeObserver();
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -945,8 +972,9 @@ export class NileSelect extends NileElement implements NileFormControl{
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
 
-    // Select only the options that match the new value
-    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    if(!this.enableVirtualScroll) {
+      this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    }
   }
 
   @watch('open', { waitUntilFirstUpdate: true })

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

@@ -19,6 +19,7 @@ export class VirtualScrollHelper {
         <nile-virtual-select
           .name=${component.name}
           .value=${component.value}
+          .autoResize=${component.autoResize}
           .placeholder=${component.placeholder}
           .size=${component.size}
           .searchEnabled=${component.searchEnabled}
@@ -48,6 +49,7 @@ export class VirtualScrollHelper {
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
           .open=${component.open}
+          .loading=${component.loading}
           exportparts="
             select-options,
             select-no-results,

package/src/nile-stepper-item/nile-stepper-item.ts

@@ -103,8 +103,8 @@ export class NileStepperItem extends NileElement {
 
 					<div part="bulletin" class=${classMap({ 'stepper__item__bulletin':true, 'stepper__item__bulletin--inline': !this.contentBelow })}>
 						${showCompletedIcon ? 
-							html`<div class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
-							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
+							html`<div part="bulletin-icon" class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
+							: html`<div part="bulletin-dot" class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
 					
@@ -115,7 +115,7 @@ export class NileStepperItem extends NileElement {
 						${this.contentBelow || !this.title ? nothing:html`
 
 							<div part="content-above" class="stepper__item__content--above">
-								<div class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
+								<div part="title_above" class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
 									${this.title}
 								</div>
 								<div class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
@@ -132,10 +132,10 @@ export class NileStepperItem extends NileElement {
 				${this.contentBelow?
 					html`
 					<div part="content-below" class="stepper__item__content--below">
-						<div part="title" class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
+						<div part="title_below" class="${classMap({ 'stepper__content__title':true, 'stepper__content__title--active':isCurrent })}">
 							${this.title}
 						</div>
-						<div part="subtitle" class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
+						<div part="subtitle_below" class="${classMap({ 'stepper__content__subtitle':true, 'stepper__content__subtitle--active':isCurrent })}">${this.subtitle}</div>
 					</div>
 				`:nothing}
 			</div>

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.ts

@@ -88,12 +88,12 @@ export class NileVerticalStepperItem extends NileElement {
 				<div part="connector" class="stepper-item__connector-content">
 					<div part="bulletin" class="stepper__item__bulletin">
 						${showCompletedIcon ? 
-							html`<div class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
-							: html`<div class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
+							html`<div part="bulletin-icon" class="${classMap({ 'stepper__bulletin--icon':true, 'stepper__bulletin__icon--active':isCurrent })}">${this.getSvg()}</div>`
+							: html`<div part="bulletin-dot" class="${classMap({ 'stepper__bulletin--dot':true, 'stepper__bulletin__dot--active':isCurrent })}"></div>`
 						}
 					</div>
-					<div class="stepper__item__line__container">
-						${this.isLast?nothing : html`<div class="${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}"></div>`}
+					<div part="line-container" class="stepper__item__line__container">
+						${this.isLast?nothing : html`<div part="line" class="${classMap({ 'stepper__item__line':true, 'stepper__item__line--active':suffixStepperLineActive })}"></div>`}
 					</div>
 				</div>
 				<div part="content" class="stepper__item__content">

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

@@ -438,7 +438,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     display: flex;
     height: 15px;
     /* Auto layout */
@@ -503,6 +503,34 @@ export const styles = css`
   .virtualized nile-option[selected]::part(base) {
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
   }
+
+  .virtual-select-loader {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 75%;
+  }
+
+  .select__footer.loading, .select__options.loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .virtual-select-loader {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 75%;
+  }
+
+  .select__footer.loading, .select__options.loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 `;
 
 export default [styles];

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

@@ -16,6 +16,7 @@ import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
 import '../nile-checkbox/nile-checkbox';
+import '../nile-loader/nile-loader';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
@@ -29,7 +30,7 @@ import { HasSlotController } from '../internal/slot';
 import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
@@ -39,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 { ResizeController } from '@lit-labs/observers/resize-controller.js';
 
 /**
  * Nile Virtual Select component.
@@ -73,6 +75,10 @@ import { VirtualSelectRenderer } from './renderer.js';
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
+ * @event nile-scroll - Emitted when the user scrolls within the virtualized container. The event payload includes scroll position information.
+ * @event nile-scroll-start - Emitted when the user starts scrolling within the virtualized container.
+ * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the virtualized container (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -111,6 +117,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   @state() displayLabel = '';
   @state() selectedOptions: VirtualOption[] = [];
   @state() oldValue: string | string[] = '';
+  
+  private scrollTimeout: number | undefined;
+  private scrolling = false;
 
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
@@ -141,6 +150,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = 'Select...';
 
+    /** Enable automatic resizing of tags area */
+    @property({ type: Boolean }) autoResize = false;
+
   /** Current search value */
   @state() searchValue: string = '';
 
@@ -156,6 +168,9 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** Show loading state */
   @property({ type: Boolean, reflect: true }) optionsLoading = false;
 
+  /** Show loading state using nile-loader */
+  @property({ type: Boolean, reflect: true, attribute: true }) loading = false;
+
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
@@ -240,6 +255,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   maxOptionsVisible = 3;
 
   @state() oldMaxOptionsVisible: number = 1;
+  @state() showListbox: boolean = false;
 
   /** Gets the validity state object */
   get validity() {
@@ -265,6 +281,25 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   disconnectedCallback() {
     this.removeOpenListeners();
+    // Clear any pending scroll timeout to prevent memory leaks
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout);
+      this.scrollTimeout = undefined;
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+      if(changedProperties.has('value')) {
+         this.selectionChanged();
+      }
+      if (changedProperties.has('autoResize')) {
+        const tagsDiv = this.shadowRoot?.querySelector('.select__tags') as HTMLElement;
+        if (this.autoResize && tagsDiv) {
+          this.resizeController.observe(tagsDiv);
+        } else if (tagsDiv) {
+          this.resizeController.unobserve(tagsDiv);
+        }
+      }
   }
 
   private initializeComponent(): void {
@@ -307,18 +342,21 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handleWindowError = this.handleWindowError.bind(this);
   }
 
   private addOpenListeners(): void {
     document.addEventListener('focusin', this.handleDocumentFocusIn);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    window.addEventListener('error', this.handleWindowError);
   }
 
   private removeOpenListeners(): void {
     document.removeEventListener('focusin', this.handleDocumentFocusIn);
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    window.removeEventListener('error', this.handleWindowError);
   }
 
   private handleFocus(): void {
@@ -405,6 +443,19 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     }
   };
 
+  /**
+   * This is a workaround for an error in the Lit Labs virtualizer.
+   * Since there are no specific guidelines available to fix the issue,
+   * we are catching only the error message related to the virtualizer.
+   */
+  private handleWindowError = (event: ErrorEvent): void => {
+    const errorMessage = event.error?.message || event.message || '';
+    if (errorMessage.includes('Cannot read properties of null (reading \'insertBefore\')')) {
+      event.preventDefault();
+      return;
+    }
+  };
+
   private handleFooterClick(event: MouseEvent): void {
     event.stopPropagation();
     event.preventDefault();
@@ -420,9 +471,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     if (this.showSelected) {
       const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-      this.data = this.originalOptionItems.filter((item: any) => 
-        selectedValues.includes(item.value)
-      );
+      this.data = this.originalOptionItems.filter((item: any) => {
+        const itemValue = this.getItemValue(item);
+        return selectedValues.some(val => String(val) === String(itemValue));
+      });
     } else {
       this.data = [...this.originalOptionItems];
     }
@@ -456,6 +508,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     this.open = !this.open;
   }
 
+  private resizeController = new ResizeController(this, {
+    callback: (entries: ResizeObserverEntry[]) => {
+      for (const entry of entries) {
+        if (entry.target.classList.contains('select__tags')) {
+          this.calculateTotalWidthOfTags();
+        }
+      }
+    }
+  });
+
   private shouldIgnoreComboboxClick(event: MouseEvent): boolean {
     const path = event.composedPath();
     const isIconButton = path.some(
@@ -617,6 +679,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     this.calculateTotalWidthOfTags();
   }
+ 
 
   handleSearchFocus(): void {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
@@ -628,9 +691,65 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   handleSearchChange(e: any): void {
     this.searchValue = e.detail.value;
+    
+    this.emit('nile-search', { 
+      query: this.searchValue,
+      name: this.name 
+    });
+    
     if (!this.disableLocalSearch) {
       this.filterVirtualOptions(this.searchValue);
       this.resetScrollPosition();
+      this.updateComplete.then(() => {
+        const virtualized = this.shadowRoot?.querySelector('.virtualized') as HTMLElement;
+        if (virtualized) {
+          if (this.data.length <= 5) {
+            virtualized.classList.add('no-scroll');
+          } else {
+            virtualized.classList.remove('no-scroll');
+          }
+        }
+      });
+    }
+  }
+
+  handleScroll(e: Event): void {
+    if(this.showSelected) {
+      return;
+    }
+
+    const target = e.target as HTMLElement;
+    
+    this.emit('nile-scroll', {
+      scrollTop: target.scrollTop,
+      scrollLeft: target.scrollLeft,
+      name: this.name
+    });
+
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.emit('nile-scroll-start', {
+        scrollTop: target.scrollTop,
+        scrollLeft: target.scrollLeft,
+        name: this.name
+      });
+    }
+
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = window.setTimeout(() => {
+      if (this.scrolling) {
+        this.scrolling = false;
+      }
+    }, 300);
+
+    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
+    if (isAtBottom && !this.searchValue) {
+        this.emit('nile-scroll-end', {
+          scrollTop: target.scrollTop,
+          scrollLeft: target.scrollLeft,
+          name: this.name,
+          isAtBottom: true
+        });
     }
   }
 
@@ -670,18 +789,18 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @watch('data', { waitUntilFirstUpdate: true })
   handleDataChange(): void {
+    if (this.data.length > 0 && this.open && !this.showSelected && !this.searchValue) {
+      this.originalOptionItems = [...this.data];
+    }
+    
     this.selectionChanged();
     // Show no results message when data is empty and not loading
-    if (!this.optionsLoading && this.data.length === 0) {
+    if (!this.optionsLoading && !this.loading && this.data.length === 0) {
       this.showNoResults = true;
     } else if (this.data.length > 0) {
       this.showNoResults = false;
     }
     this.requestUpdate();
-    
-    if (this.open) {
-      this.resetScrollPosition();
-    }
   }
 
   @watch('renderItemConfig', { waitUntilFirstUpdate: true })
@@ -705,8 +824,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   async handleOpenChange(): Promise<void> {
     if (this.open && !this.disabled) {
       await this.handleOpen();
+      this.showListbox = true;
     } else {
       await this.handleClose();
+      this.showListbox = false;
     }
   }
 
@@ -745,7 +866,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private initializeOriginalItems(): void {
-    if (this.originalOptionItems.length === 0 && this.data.length > 0) {
+    if (this.data.length > 0) {
       this.originalOptionItems = [...this.data];
     }
   }
@@ -893,7 +1014,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       >
         ${this.renderCustomSelect(hasCustomSelect)}
         ${this.renderCombobox(hasCustomSelect, hasClearIcon)}
-        ${this.renderListbox()}
+        ${this.showListbox ? this.renderListbox() : html``}
       </nile-popup>
     `;
   }
@@ -1125,17 +1246,26 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private renderLoader(): TemplateResult {
-    return this.optionsLoading
-      ? html`
-          <span part="loader" class="select__loader">
-            <nile-icon
-              class="select__loader--icon"
-              name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            ></nile-icon>
-          </span>
-        `
-      : html``;
+    if (this.loading) {
+      return html`
+        <span part="loader" class="virtual-select-loader">
+          <nile-loader size="sm"></nile-loader>
+        </span>
+      `;
+    }
+    
+    if (this.optionsLoading) {
+      return html`
+        <span part="loader" class="select__loader">
+          <nile-icon
+            class="select__loader--icon"
+            name="button-loading-blue"
+          ></nile-icon>
+        </span>
+      `;
+    }
+    
+    return html``;
   }
 
   private renderFooter(): TemplateResult {
@@ -1143,7 +1273,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       ? html`
           <div
             part="footer"
-            class="select__footer"
+            class="select__footer ${this.loading ? 'loading' : ''}"
             @click="${this.handleFooterClick}"
           >
             <span
@@ -1198,7 +1328,8 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
       this.renderItemConfig?.getValue,
       this.showNoResults,
       this.noResultsMessage,
-      this.optionsLoading
+      this.optionsLoading || this.loading,
+      this.handleScroll.bind(this)
     );
   }
 
@@ -1273,16 +1404,16 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   private resetScrollPosition(): void {
     this.updateComplete.then(() => {
-      if (this.virtualizedContainer) {
+      if (this.virtualizedContainer && this.virtualizedContainer.isConnected) {
         this.virtualizedContainer.scrollTop = 0;
         
         const listbox = this.shadowRoot?.querySelector('.select__listbox') as HTMLElement;
-        if (listbox) {
+        if (listbox && listbox.isConnected) {
           listbox.scrollTop = 0;
         }
         
         const virtualizer = this.virtualizedContainer.querySelector('lit-virtualizer') as HTMLElement;
-        if (virtualizer) {
+        if (virtualizer && virtualizer.isConnected) {
           virtualizer.scrollTop = 0;
         }
       }

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

@@ -21,13 +21,14 @@ export class VirtualSelectRenderer {
     getItemValue?: (item: any) => string,
     showNoResults?: boolean,
     noResultsMessage?: string,
-    optionsLoading?: boolean
+    loading?: boolean,
+    onScroll?: (e: Event) => void
   ): TemplateResult {
     return html`
       <div part="select-options" class="select__options ${
         searchEnabled ? 'select__options__search-enabled' : ``
-      }">
-        ${showNoResults && !optionsLoading
+      } ${loading ? 'loading' : ''}">
+        ${showNoResults && !loading
           ? html`
               <div part="select-no-results" class="select__no-results">
                 ${noResultsMessage || 'No results found'}
@@ -37,6 +38,7 @@ export class VirtualSelectRenderer {
               <div
                 class="virtualized"
                 part="virtualized"
+                @scroll=${onScroll}
               >
                 ${VirtualSelectRenderer.shouldUseVirtualizer(data)
                   ? html`
@@ -70,12 +72,12 @@ export class VirtualSelectRenderer {
     
     const optionValue = valueFn(item);
     const displayText = displayTextFn(item);
-    const isDisabled = item.disabled || false;
-    const className = item.className;
+    const isDisabled = item?.disabled || false;
+    const className = item?.className;
     
     let isSelected = false;
     if (multiple) {
-      isSelected = Array.isArray(value) && value.includes(optionValue);
+      isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));
     } else {
       isSelected = (Array.isArray(value) ? value[0] : value) === optionValue;
     }
@@ -95,9 +97,9 @@ export class VirtualSelectRenderer {
 
   /**
    * Determines whether to use virtualizer based on dataset size
-   * For small datasets (less than 50 items), use regular rendering for better sizing
+   * For small datasets (less than 5 items), use regular rendering for better sizing
    */
   private static shouldUseVirtualizer(data: any[]): boolean {
-    return data.length >= 50;
+    return data.length >= 5;
   }
 } 

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

@@ -28,7 +28,7 @@ export class VirtualSelectSelectionManager {
       const item = data.find((item: any) => {
         const itemValue = valueFn(item);
         const itemDisplayText = displayTextFn(item);
-        return itemValue === valueItem || itemDisplayText === valueItem;
+        return String(itemValue) === String(valueItem) || String(itemDisplayText) === String(valueItem);
       });
       
       const displayText = item ? displayTextFn(item) : valueItem;