fix issues with selected and scrollToIndex after selected

Author: chiefcll

src/primitives/Virtual.tsx

@@ -46,14 +46,15 @@ function createVirtual<T>(
     return props.uniformSize !== false;
   });
 
-  type SliceState = { start: number; slice: T[]; selected: number, delta: number, shiftBy: number, atStart: boolean };
+  type SliceState = { start: number; slice: T[]; selected: number, delta: number, shiftBy: number, atStart: boolean; cursor: number };
     const [slice, setSlice] = s.createSignal<SliceState>({
       start: 0,
       slice: [],
       selected: 0,
       delta: 0,
       shiftBy: 0,
       atStart: true,
+      cursor: 0,
     });
 
     function normalizeDeltaForWindow(delta: number, windowLen: number): number {
@@ -86,7 +87,7 @@ function createVirtual<T>(
 
     function computeSlice(c: number, delta: number, prev: SliceState): SliceState {
       const total = itemCount();
-      if (total === 0) return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true };
+      if (total === 0) return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true, cursor: 0 };
 
       const length = props.displaySize + bufferSize();
       let start = prev.start;
@@ -186,7 +187,7 @@ function createVirtual<T>(
               atStart = false;
             } else {
               // ScrollToIndex was called
-              if (Math.abs(c - prev.start) > 1) {
+              if (c !== prev.cursor) {
                 start = c;
                 if (c === 0) {
                   atStart = true;
@@ -286,7 +287,7 @@ function createVirtual<T>(
           : items().slice(start, start + length);
       }
 
-      const state: SliceState = { start, slice: newSlice, selected, delta, shiftBy, atStart };
+      const state: SliceState = { start, slice: newSlice, selected, delta, shiftBy, atStart, cursor: c };
 
       if (props.debugInfo) {
         console.log(`[Virtual]`, {
@@ -412,6 +413,15 @@ function createVirtual<T>(
       if (lng.hasFocus(viewRef)) {
         viewRef.children[activeIndex]?.setFocus();
       }
+
+      if (newState.shiftBy === 0) return;
+
+      const childSize = computeSize(slice().selected);
+      // Original Position is offset to support scrollToIndex
+      originalPosition = originalPosition ?? viewRef.lng[axis];
+      targetPosition = targetPosition ?? viewRef.lng[axis];
+
+      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + (childSize * -1);
     });
   };
 

src/primitives/utils/handleNavigation.ts

@@ -6,11 +6,7 @@ function idxInArray(idx: number, arr: readonly any[]): boolean {
   return idx >= 0 && idx < arr.length;
 }
 
-function findFirstFocusableChildIdx(
-  el: lngp.NavigableElement,
-  from = 0,
-  delta = 1,
-): number {
+function findFirstFocusableChildIdx(el: lngp.NavigableElement, from = 0, delta = 1): number {
   for (let i = from; ; i += delta) {
     if (!idxInArray(i, el.children)) {
       if (el.wrap) {
@@ -46,9 +42,7 @@ function selectChild(el: lngp.NavigableElement, index: number): boolean {
 }
 
 /** @deprecated Use {@link navigableForwardFocus} instead */
-export function onGridFocus(
-  _?: lngp.OnSelectedChanged,
-): lng.ForwardFocusHandler {
+export function onGridFocus(_?: lngp.OnSelectedChanged): lng.ForwardFocusHandler {
   return function () {
     return navigableForwardFocus.call(this, this);
   };
@@ -72,6 +66,10 @@ export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
 
   let selected = Math.max(navigable.selected, 0);
 
+  if (this.children.length === 0) {
+    return false;
+  }
+
   if (selected !== 0) {
     selected = lng.clamp(selected, 0, Math.max(0, this.children.length - 1));
     while (!idxInArray(selected, this.children)) {
@@ -85,14 +83,9 @@ export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
   return selectChild(navigable, selected);
 };
 
-export function handleNavigation(
-  direction: 'up' | 'right' | 'down' | 'left',
-): lng.KeyHandler {
+export function handleNavigation(direction: 'up' | 'right' | 'down' | 'left'): lng.KeyHandler {
   return function () {
-    return moveSelection(
-      this as lngp.NavigableElement,
-      direction === 'up' || direction === 'left' ? -1 : 1,
-    );
+    return moveSelection(this as lngp.NavigableElement, direction === 'up' || direction === 'left' ? -1 : 1);
   };
 }
 
@@ -113,19 +106,13 @@ export function handleNavigation(
  * ```
  */
 export const navigableHandleNavigation: lng.KeyHandler = function (e) {
-  return moveSelection(
-    this as lngp.NavigableElement,
-    e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1,
-  );
+  return moveSelection(this as lngp.NavigableElement, e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1);
 };
 
 /**
  * Moves the selection within a {@link lngp.NavigableElement}.
  */
-export function moveSelection(
-  el: lngp.NavigableElement,
-  delta: number,
-): boolean {
+export function moveSelection(el: lngp.NavigableElement, delta: number): boolean {
   let selected = findFirstFocusableChildIdx(el, el.selected + delta, delta);
 
   if (selected === -1) {
@@ -148,8 +135,7 @@ export function moveSelection(
     lng.assertTruthy(lastSelectedChild instanceof lng.ElementNode);
 
     const num = lastSelectedChild.selected || 0;
-    active.selected =
-      num < active.children.length ? num : active.children.length - 1;
+    active.selected = num < active.children.length ? num : active.children.length - 1;
   }
 
   return selectChild(el, selected);
@@ -161,10 +147,7 @@ function distanceBetweenRectCenters(a: lng.Rect, b: lng.Rect): number {
   return Math.sqrt(dx * dx + dy * dy);
 }
 
-function findClosestFocusableChildIdx(
-  el: lng.ElementNode,
-  prevEl: lng.ElementNode,
-): number {
+function findClosestFocusableChildIdx(el: lng.ElementNode, prevEl: lng.ElementNode): number {
   // select child closest to the previous active element
   const prevRect = lng.getElementScreenRect(prevEl);
   const elRect = lng.getElementScreenRect(el);
@@ -272,11 +255,7 @@ export const spatialHandleNavigation: lng.KeyHandler = function (e) {
 
   // Select next/prev child in the current column/row
   if (flexDelta !== 0) {
-    for (
-      let i = selected + flexDelta;
-      idxInArray(i, this.children);
-      i += flexDelta
-    ) {
+    for (let i = selected + flexDelta; idxInArray(i, this.children); i += flexDelta) {
       const child = this.children[i]!;
       if (child.skipFocus) continue;
 
@@ -291,11 +270,7 @@ export const spatialHandleNavigation: lng.KeyHandler = function (e) {
     let closestIdx = -1;
     let closestDist = Infinity;
 
-    for (
-      let i = selected + crossDelta;
-      idxInArray(i, this.children);
-      i += crossDelta
-    ) {
+    for (let i = selected + crossDelta; idxInArray(i, this.children); i += crossDelta) {
       const child = this.children[i]!;
       if (child.skipFocus) continue;