@smilodon/core 1.0.6 → 1.0.8

package/dist/index.js

@@ -1557,8 +1557,13 @@ class EnhancedSelect extends HTMLElement {
         this._config.callbacks.onOpen?.();
         // Scroll to selected if configured
         if (this._config.scrollToSelected.enabled) {
-            // Use setTimeout to allow render to complete
-            setTimeout(() => this._scrollToSelected(), 0);
+            // Use requestAnimationFrame for better timing after render
+            requestAnimationFrame(() => {
+                // Double RAF to ensure layout is complete
+                requestAnimationFrame(() => {
+                    this._scrollToSelected();
+                });
+            });
         }
     }
     _handleClose() {
@@ -1908,26 +1913,44 @@ class EnhancedSelect extends HTMLElement {
             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() {