@smilodon/core 1.0.5 → 1.0.7

package/dist/index.umd.js

@@ -1485,7 +1485,6 @@
             this._input.addEventListener('input', (e) => {
                 if (!this._config.searchable)
                     return;
-                console.log('[EnhancedSelect] Input event fired', e.target.value);
                 const query = e.target.value;
                 this._handleSearch(query);
             });
@@ -1511,7 +1510,6 @@
                 this._intersectionObserver = new IntersectionObserver((entries) => {
                     entries.forEach((entry) => {
                         if (entry.isIntersecting) {
-                            console.log('[InfiniteScroll] Sentinel intersected. isBusy:', this._state.isBusy);
                             if (!this._state.isBusy) {
                                 this._loadMoreItems();
                             }
@@ -1603,7 +1601,6 @@
             }
         }
         _handleSearch(query) {
-            console.log('[EnhancedSelect] _handleSearch called with:', JSON.stringify(query));
             this._state.searchQuery = query;
             // Clear previous search timeout
             if (this._searchTimeout) {
@@ -1614,12 +1611,10 @@
             this._state.isSearching = false;
             // Ensure dropdown is open when searching
             if (!this._state.isOpen) {
-                console.log('[EnhancedSelect] Opening dropdown for search');
                 this._handleOpen();
             }
             else {
                 // Filter and render options immediately
-                console.log('[EnhancedSelect] Dropdown already open, re-rendering options');
                 this._renderOptions();
             }
             // Get filtered items based on search query - searches ENTIRE phrase
@@ -1639,7 +1634,6 @@
                 })
                 : this._state.loadedItems;
             const count = filteredItems.length;
-            console.log(`[EnhancedSelect] Search results: ${count} items found for query "${searchQuery}"`);
             // Announce search results for accessibility
             if (searchQuery) {
                 this._announce(`${count} result${count !== 1 ? 's' : ''} found for "${query}"`);
@@ -1920,32 +1914,49 @@
                 return;
             const target = this._config.scrollToSelected.multiSelectTarget;
             const indices = Array.from(this._state.selectedIndices).sort((a, b) => a - b);
-            const targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
-            // FIX: Find the option element by ID instead of index in children
-            // because children list might be filtered or reordered
+            // For multi-select, find the closest selected item to the current scroll position
+            let targetIndex;
+            if (this._config.selection.mode === 'multi' && indices.length > 1) {
+                // Calculate which selected item is closest to the center of the viewport
+                const dropdownRect = this._dropdown.getBoundingClientRect();
+                const viewportCenter = this._dropdown.scrollTop + (dropdownRect.height / 2);
+                // Find the selected item closest to viewport center
+                let closestIndex = indices[0];
+                let closestDistance = Infinity;
+                for (const index of indices) {
+                    const optionId = `${this._uniqueId}-option-${index}`;
+                    const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
+                    if (option) {
+                        const optionTop = option.offsetTop;
+                        const distance = Math.abs(optionTop - viewportCenter);
+                        if (distance < closestDistance) {
+                            closestDistance = distance;
+                            closestIndex = index;
+                        }
+                    }
+                }
+                targetIndex = closestIndex;
+            }
+            else {
+                // For single select or only one selected item, use the configured target
+                targetIndex = target === 'first' ? indices[0] : indices[indices.length - 1];
+            }
+            // Find and scroll to the target option
             const optionId = `${this._uniqueId}-option-${targetIndex}`;
-            // We need to search in shadow root or options container
-            // Since options are custom elements, we can find them by ID if we set it (we do)
-            // But wait, we set ID on the element instance, but is it in the DOM?
-            // If filtered out, it won't be in the DOM.
-            // If we are searching, we might not want to scroll to selected if it's not visible
-            // But if we just opened the dropdown, we usually want to see the selected item.
-            // If the selected item is filtered out, we can't scroll to it.
-            // Try to find the element in the options container
-            // Note: querySelector on shadowRoot works if we set the ID attribute
-            // In _renderOptions we set: option.id = ...
             const option = this._optionsContainer.querySelector(`[id="${optionId}"]`);
             if (option) {
+                // Use smooth scrolling with center alignment for better UX
                 option.scrollIntoView({
                     block: this._config.scrollToSelected.block || 'center',
                     behavior: 'smooth',
                 });
+                // Also set it as active for keyboard navigation
+                this._setActive(targetIndex);
             }
         }
         async _loadMoreItems() {
             if (this._state.isBusy)
                 return;
-            console.log('[InfiniteScroll] _loadMoreItems triggered');
             this._setBusy(true);
             // Save scroll position before loading
             if (this._dropdown) {
@@ -1959,7 +1970,6 @@
             try {
                 // Emit event for parent to handle
                 this._state.currentPage++;
-                console.log(`[InfiniteScroll] Emitting loadMore event for page ${this._state.currentPage}`);
                 this._emit('loadMore', { page: this._state.currentPage, items: [] });
                 this._config.callbacks.onLoadMore?.(this._state.currentPage);
                 // NOTE: We do NOT set isBusy = false here.
@@ -2014,14 +2024,6 @@
             // we need to maintain scroll position during the update
             if (this._state.preserveScrollPosition && this._dropdown) {
                 const targetScrollTop = this._state.lastScrollPosition;
-                console.log('[InfiniteScroll] setItems: before render', {
-                    previousLength,
-                    newLength,
-                    lastScrollPosition: this._state.lastScrollPosition,
-                    scrollTop: this._dropdown.scrollTop,
-                    scrollHeight: this._dropdown.scrollHeight,
-                    clientHeight: this._dropdown.clientHeight
-                });
                 // Only clear loading if we actually got more items
                 if (newLength > previousLength) {
                     this._state.isBusy = false;
@@ -2035,13 +2037,6 @@
                 requestAnimationFrame(() => {
                     if (this._dropdown) {
                         this._dropdown.scrollTop = targetScrollTop;
-                        console.log('[InfiniteScroll] setItems: after render', {
-                            newLength,
-                            lastScrollPosition: this._state.lastScrollPosition,
-                            scrollTop: this._dropdown.scrollTop,
-                            scrollHeight: this._dropdown.scrollHeight,
-                            clientHeight: this._dropdown.clientHeight
-                        });
                     }
                 });
                 // Only clear preserveScrollPosition if we got new items
@@ -2217,7 +2212,6 @@
          * Render options based on current state
          */
         _renderOptions() {
-            console.log('[EnhancedSelect] _renderOptions called');
             // Cleanup observer
             if (this._loadMoreTrigger && this._intersectionObserver) {
                 this._intersectionObserver.unobserve(this._loadMoreTrigger);
@@ -2373,7 +2367,6 @@
             this._optionsContainer.appendChild(container);
             // Setup intersection observer for auto-load
             if (this._intersectionObserver && this._loadMoreTrigger) {
-                console.log('[InfiniteScroll] Observing sentinel');
                 this._intersectionObserver.observe(this._loadMoreTrigger);
             }
         }