fix(ListBox): auto scroll

Author: tenphi

.changeset/nice-maps-dress.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix auto-scroll in ListBox with sections.

src/components/actions/CommandMenu/styled.tsx

@@ -51,8 +51,8 @@ export const StyledSearchInput = tasty({
     userSelect: 'auto',
     height: '($size + 1x)',
     padding: {
-      '': '.5x $inline-padding',
-      prefix: '0 $inline-padding 0 .5x',
+      '': '.5x 1.5x',
+      prefix: '0 1.5x 0 .5x',
     },
 
     $size: {
@@ -61,10 +61,6 @@ export const StyledSearchInput = tasty({
       '[data-size="medium"]': '$size-md',
       '[data-size="large"]': '$size-lg',
     },
-    '$inline-padding':
-      'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-    '$inline-compensation': '1x',
-    '$min-inline-padding': '1x',
   },
 });
 

src/components/actions/Menu/styled.tsx

@@ -75,7 +75,7 @@ export const StyledHeader = tasty(Space, {
     placeContent: 'space-between',
     placeItems: 'center',
     whiteSpace: 'nowrap',
-    padding: '.5x $inline-padding',
+    padding: '.5x 1.5x',
     height: 'min $size',
     boxSizing: 'border-box',
     border: 'bottom',
@@ -87,10 +87,6 @@ export const StyledHeader = tasty(Space, {
       '[data-size="medium"]': '$size-md',
       '[data-size="large"]': '$size-lg',
     },
-    '$inline-padding':
-      'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-    '$inline-compensation': '1x',
-    '$min-inline-padding': '1x',
   },
 });
 
@@ -216,8 +212,8 @@ export const StyledSectionHeading = tasty(Space, {
     placeContent: 'center space-between',
     align: 'start',
     padding: {
-      '': '.5x $inline-padding',
-      prefix: '0 $inline-padding 0 .5x',
+      '': '.5x .75x',
+      prefix: '0 .75x 0 .5x',
     },
 
     $size: {
@@ -226,9 +222,5 @@ export const StyledSectionHeading = tasty(Space, {
       '[data-size="medium"]': '$size-md',
       '[data-size="large"]': '$size-lg',
     },
-    '$inline-padding':
-      'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation - 1bw))',
-    '$inline-compensation': '.5x',
-    '$min-inline-padding': '1x',
   },
 });

src/components/fields/FilterListBox/FilterListBox.tsx

@@ -90,13 +90,9 @@ const SearchInputElement = tasty({
     ...DEFAULT_INPUT_STYLES,
     fill: '#clear',
     padding: {
-      '': '.5x $inline-padding',
-      prefix: '0 $inline-padding 0 .5x',
+      '': '.5x 1.5x',
+      prefix: '0 1.5x 0 .5x',
     },
-    '$inline-padding':
-      'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-    '$inline-compensation': '1x',
-    '$min-inline-padding': '1x',
   },
 });
 

src/components/fields/ListBox/ListBox.tsx

@@ -789,46 +789,42 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
     }
   }, [shouldVirtualize, itemsArray, rowVirtualizer]);
 
-  // Keep focused item visible when virtualizing, but only for keyboard navigation
-  useEffect(() => {
-    if (!shouldVirtualize) return;
+  // Keep focused item visible, but only for keyboard navigation
+  useLayoutEffect(() => {
     const focusedKey = listState.selectionManager.focusedKey;
-    if (focusedKey != null) {
-      const idx = itemsArrayRef.current.findIndex(
-        (it) => it.key === focusedKey,
-      );
-      if (idx !== -1) {
-        // Check if the focused item is actually visible in the current viewport
-        // (not just rendered due to overscan)
-        const scrollElement = scrollRef.current;
-        if (scrollElement) {
-          const scrollTop = scrollElement.scrollTop;
-          const viewportHeight = scrollElement.clientHeight;
-          const viewportBottom = scrollTop + viewportHeight;
-
-          // Find the virtual item for this index
-          const virtualItems = rowVirtualizer.getVirtualItems();
-          const virtualItem = virtualItems.find((item) => item.index === idx);
-
-          let isAlreadyVisible = false;
-          if (virtualItem) {
-            const itemTop = virtualItem.start;
-            const itemBottom = virtualItem.start + virtualItem.size;
-
-            // Check if the item is fully visible in the viewport
-            // We should scroll if the item is partially hidden
-            isAlreadyVisible =
-              itemTop >= scrollTop && itemBottom <= viewportBottom;
-          }
+    if (focusedKey == null) return;
 
-          // Only scroll if the item is not already visible AND the focus change was due to keyboard navigation
-          if (!isAlreadyVisible && lastFocusSourceRef.current === 'keyboard') {
-            rowVirtualizer.scrollToIndex(idx, { align: 'auto' });
-          }
-        }
-      }
+    // Only scroll on keyboard navigation
+    if (lastFocusSourceRef.current !== 'keyboard') return;
+
+    const scrollElement = scrollRef.current;
+    if (!scrollElement) return;
+
+    const itemElement = scrollElement.querySelector(
+      `[data-key="${CSS.escape(String(focusedKey))}"]`,
+    ) as HTMLElement;
+    if (!itemElement) return;
+
+    const scrollTop = scrollElement.scrollTop;
+    const viewportHeight = scrollElement.clientHeight;
+    const viewportBottom = scrollTop + viewportHeight;
+
+    const itemRect = itemElement.getBoundingClientRect();
+    const scrollRect = scrollElement.getBoundingClientRect();
+
+    // Calculate item position relative to scroll container
+    const itemTop = itemRect.top - scrollRect.top + scrollTop;
+    const itemBottom = itemTop + itemRect.height;
+
+    // Check if the item is fully visible in the viewport
+    const isAlreadyVisible =
+      itemTop >= scrollTop && itemBottom <= viewportBottom;
+
+    if (!isAlreadyVisible) {
+      // Use scrollIntoView with block: 'nearest' to minimize scroll jumps
+      itemElement.scrollIntoView({ block: 'nearest', behavior: 'auto' });
     }
-  }, [shouldVirtualize, listState.selectionManager.focusedKey, itemsArray]);
+  }, [listState.selectionManager.focusedKey, itemsArray]);
 
   // Merge React Aria listbox props with custom keyboard props so both sets of
   // event handlers (e.g. Arrow navigation *and* our Escape handler) are
@@ -1205,6 +1201,7 @@ function Option({
       ref={combinedRef}
       qa={item.props?.qa}
       id={`ListBoxItem-${String(item.key)}`}
+      data-key={String(item.key)}
       {...mergeProps(filteredOptionProps, hoverProps, {
         onClick: handleOptionClick,
         onKeyDown,