@aquera/nile-elements 0.1.75-beta-1.4 → 0.1.75-beta-1.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.75-beta-1.4",
+  "version": "0.1.75-beta-1.5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -108,23 +108,23 @@
   },
   "dependencies": {
     "@aquera/nile": "latest",
-    "@codemirror/lang-html": "6.4.9",
-    "@codemirror/lang-javascript": "6.2.1",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-sql": "6.7.0",
-    "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/observers": "^2.0.6",
-    "@lit-labs/virtualizer": "^2.0.15",
     "@open-wc/form-control": "^0.5.0",
     "@open-wc/form-helpers": "^0.2.1",
-    "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "chalk": "5.3.0",
-    "codemirror": "6.0.1",
-    "composed-offset-position": "^0.0.4",
+    "@rollup/plugin-commonjs": "^25.0.3",
     "element-internals-polyfill": "^1.1.20",
+    "lit": "^3.0.0",
+    "@floating-ui/dom": "^1.2.1",
+    "composed-offset-position": "^0.0.4",
+    "@codemirror/lang-javascript": "6.2.1",
+    "@codemirror/lang-sql": "6.7.0",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-html": "6.4.9",
+    "@lit-labs/virtualizer": "^2.0.15",
+    "codemirror": "6.0.1",
+    "chalk": "5.3.0",
     "figlet": "1.7.0",
-    "lit": "^3.0.0"
+    "@lit-labs/observers": "^2.0.6"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -139,7 +139,6 @@
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-storybook": "^0.5.4",
     "@web/test-runner": "^0.14.0",
-    "@web/test-runner-puppeteer": "0.16.0",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
@@ -156,7 +155,8 @@
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.3.1",
     "typescript": "^5.6.2",
-    "x": "^0.1.2"
+    "x": "^0.1.2",
+    "@web/test-runner-puppeteer": "0.16.0"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/src/nile-button/nile-button.ts

@@ -78,7 +78,7 @@ export class NileButton extends NileElement implements NileFormControl {
     | 'secondary-blue' = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size: 'medium' = 'medium';
+  @state() size = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;

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

@@ -398,7 +398,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-top: 1px solid var(--nile-colors-neutral-400);
     display: flex;
     height: 15px;
     /* Auto layout */

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

@@ -42,7 +42,6 @@ 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>>;
 
 /**
@@ -122,16 +121,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   private scrollTimeout: number | undefined;
   private scrolling = false;
   private options: NileOption[] = [];
-  private resizeController = new ResizeController(this, {
-    callback: (entries: ResizeObserverEntry[]) => {
-      for (const entry of entries) {
-        if (entry.target.classList.contains('select__tags')) {
-          this.calculateTotalWidthOfTags();
-        }
-      }
-    }
-  });
-  
+  private resizeController?: ResizeController;
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -202,6 +192,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   
 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
+  @property({ type: Boolean, attribute: true, reflect: true }) autoResize = false;
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -285,6 +276,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;
@@ -326,24 +320,43 @@ 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 {
     if(this.enableGroupHeader) {
       this.handleGroupSearchChange();
     }
-    const tagsContainer = this.shadowRoot?.querySelector('.select__tags');
-    if (tagsContainer) {
-      this.resizeController.observe(tagsContainer);
-    }
+
+    this.setupResizeObserver();
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
   }
+
   setCheckBoxInOption(checked: boolean): void {
     if(!this.options.length) { 
       this.options = this.getAllOptions();
@@ -958,8 +971,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-virtual-select/nile-virtual-select.css.ts

@@ -32,6 +32,11 @@ export const styles = css`
     flex-direction: column;
   }
 
+ .virtualized.no-scroll {
+  overflow-y: hidden !important;
+  max-height: none !important;
+}
+
   .virtualized:not(:has(lit-virtualizer)) nile-option {
     flex-shrink: 0;
   }
@@ -421,7 +426,7 @@ export const styles = css`
     position: sticky;
     bottom: 0px;
     background: var(--nile-colors-neutral-100);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-top: 1px solid var(--nile-colors-neutral-400);
     display: flex;
     height: 15px;
     /* Auto layout */
@@ -486,6 +491,20 @@ export const styles = css`
   .virtualized nile-option[selected]::part(base) {
     color: var(--nile-colors-primary-600);
   }
+
+  .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,16 +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="button-loading-blue"
-            ></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 {
@@ -1142,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
@@ -1197,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)
     );
   }
 
@@ -1272,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;