@aquera/nile-elements 2.0.4 → 2.0.5

package/dist/src/nile-combobox/nile-combobox.js

@@ -999,8 +999,43 @@ let NileCombobox = class NileCombobox extends NileElement {
             this.popup.popup.style.visibility = 'hidden';
         }
         this.popup.active = true;
-        await new Promise(r => requestAnimationFrame(r));
-        await new Promise(r => requestAnimationFrame(r));
+        // Wait for Lit to render the listbox and attach scrollElementRef.
+        await this.updateComplete;
+        const scrollEl = this.isHorizontalGrid
+            ? this.hScrollElementRef.value
+            : this.scrollElementRef.value;
+        await new Promise(resolve => {
+            let attempts = 0;
+            const maxAttempts = 10;
+            const check = () => {
+                attempts++;
+                const hasSize = this.isHorizontalGrid
+                    ? (scrollEl?.offsetWidth ?? 0) > 0
+                    : (scrollEl?.offsetHeight ?? 0) > 0;
+                if (hasSize || attempts >= maxAttempts) {
+                    resolve();
+                }
+                else {
+                    requestAnimationFrame(check);
+                }
+            };
+            requestAnimationFrame(check);
+        });
+        if (this.isHorizontalGrid) {
+            const hVirtualizer = this.hVirtualizerCtrl.getVirtualizer();
+            hVirtualizer.scrollOffset = 0;
+            hVirtualizer.measure();
+        }
+        else {
+            const virtualizer = this.virtualizerCtrl.getVirtualizer();
+            virtualizer.scrollOffset = 0;
+            virtualizer.measure();
+        }
+        this.requestUpdate();
+        await this.updateComplete;
+        await new Promise(resolve => {
+            requestAnimationFrame(() => resolve());
+        });
         if (this.popup?.popup) {
             this.popup.popup.style.visibility = '';
         }
@@ -1098,6 +1133,7 @@ let NileCombobox = class NileCombobox extends NileElement {
         this.updateComplete.then(() => this.formControlController.updateValidity());
     }
     async resetScrollPosition() {
+        this.stickyHeaderIndex = -1;
         await this.portalManager.resetScrollPosition();
     }
     // ── Render ──
@@ -1294,8 +1330,8 @@ let NileCombobox = class NileCombobox extends NileElement {
       </button>
     `;
     }
-    renderStickyHeaderOverlay(grouped, useVirtual) {
-        if (!this.stickyGroupHeader || !grouped || !useVirtual)
+    renderStickyHeaderOverlay() {
+        if (!this.stickyGroupHeader)
             return html ``;
         const idx = this.stickyHeaderIndex;
         if (idx < 0 || idx >= this.filteredRows.length)
@@ -1342,29 +1378,32 @@ let NileCombobox = class NileCombobox extends NileElement {
         class="combobox__listbox ${this.isBidirectionalGrid ? 'combobox__listbox--bidirectional' : ''} ${this.portal ? 'combobox__portal-hidden' : ''}"
         tabindex="-1"
         @mouseup=${this.onOptionClick}
-        @scroll=${this.onScroll}
         style="${this.portal ? 'display: none;' : ''}${this.isBidirectionalGrid ? `max-height:${this.gridRows * 38 + 16}px;` : ''}"
-        ${ref(this.scrollElementRef)}
       >
-        ${this.renderLoader()}
         ${this.renderSelectAll()}
-        ${this.renderStickyHeaderOverlay(grouped, useVirtual)}
+        <div
+          class="combobox__options-scroll"
+          @scroll=${this.onScroll}
+          ${ref(this.scrollElementRef)}
+        >
+        ${this.renderLoader()}
         ${this.showNoResults && !this.optionsLoading && !this.loading
             ? this.renderEmptyState()
             : isGrid
                 ? ComboboxRenderer.renderVirtualizedGrid(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.gridColumns, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, this.isBidirectionalGrid ? this.gridColumnWidth : undefined)
                 : grouped
                     ? (useVirtual
-                        ? ComboboxRenderer.renderRowsVirtualized(virtualItems, totalSize, this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        ? ComboboxRenderer.renderRowsVirtualized(virtualItems, totalSize, this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.renderStickyHeaderOverlay(), this.stickyGroupHeader ? this.stickyHeaderIndex : -1)
                         : ComboboxRenderer.renderRowsPlain(this.filteredRows, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined))
                     : useVirtual
-                        ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, virtualizer.measureElement, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
+                        ? ComboboxRenderer.renderVirtualizedOptions(virtualItems, totalSize, this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.optionsLoading || this.loading, this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined)
                         : ComboboxRenderer.renderPlainOptions(this.filteredData, this.value, this.multiple, this.getDisplayText.bind(this), this.getItemValue.bind(this), this.showNoResults, this.noResultsMessage, this.optionsLoading || this.loading, this.onScroll.bind(this), this.allowHtmlLabel, this.renderItemConfig?.getDescription ? this.getItemDescription.bind(this) : undefined, this.renderItemConfig?.getPrefix ? this.getItemPrefix.bind(this) : undefined, this.renderItemConfig?.getSuffix ? this.getItemSuffix.bind(this) : undefined, undefined, this.hasActiveFilter ? this.noResultsSubtitle : undefined)}
         ${showAddOption ? html `
           <div @mouseup=${(e) => { e.stopPropagation(); this.addCustomValue(this.searchValue.trim()); }}>
             ${ComboboxRenderer.renderAddCustomOption(this.searchValue.trim(), this.multiple)}
           </div>
         ` : ''}
+        </div>
         ${this.multiple && this.showFooter && !this.selectAllEnabled ? this.renderFooter() : ''}
       </div>
     `;