fix: re-introduce prevSelectedId to change focus when selection cha…

…nges (#1091)
wixplosives · Jan 19, 2025 · 2c4f13d · 2c4f13d
1 parent 147cae3
commit 2c4f13d
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/packages/components/src/board-index.ts b/packages/components/src/board-index.ts
@@ -26,7 +26,7 @@ import scenario_renderer from './_codux/boards/scenario-renderer/scenario-render
 import scroll_list from './scroll-list/boards/scroll-list.board.js';
 import scroll_offset from './scroll-list/boards/scroll-offset.board.js';
 import scroll_ref from './scroll-list/boards/scroll-ref.board.js';
-import scroll_to_selection from './scroll-list/boards/scroll-to-selection.board.js';
+import scroll_to_focused from './scroll-list/boards/scroll-to-focused.board.js';
 import searchable_text from './searchable-text/boards/searchable-text.board.js';
 import tree from './tree/boards/tree.board.js';
 import tree_focus from './tree/boards/tree-focus.board.js';
@@ -62,7 +62,7 @@ export default [
     scroll_list,
     scroll_offset,
     scroll_ref,
-    scroll_to_selection,
+    scroll_to_focused,
     searchable_text,
     tree,
     tree_focus,

diff --git a/packages/components/src/list/list.tsx b/packages/components/src/list/list.tsx
@@ -76,7 +76,14 @@ export function List<T, EL extends HTMLElement = HTMLDivElement>({
     enableMultiselect = true,
 }: ListProps<T>): React.ReactElement {
     const [selectedIds, setSelectedIds] = useStateControls(selectionControl, { ids: [] });
+    const prevSelectedId = useRef(selectedIds.lastSelectedId);
     const [focusedId, setFocusedId] = useStateControls(focusControl, undefined);
+
+    if (prevSelectedId.current !== selectedIds.lastSelectedId) {
+        setFocusedId(selectedIds.lastSelectedId);
+        prevSelectedId.current = selectedIds.lastSelectedId;
+    }
+
     const defaultRef = useRef<EL>(null);
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const actualRef = listRoot?.props?.ref || defaultRef;

diff --git a/...list/boards/scroll-to-selection.board.tsx → ...l-list/boards/scroll-to-focused.board.tsx b/...list/boards/scroll-to-selection.board.tsx → ...l-list/boards/scroll-to-focused.board.tsx
diff --git a/packages/components/src/scroll-list/hooks/index.ts b/packages/components/src/scroll-list/hooks/index.ts
@@ -1,3 +1,3 @@
 export * from './use-load-more-on-scroll.js';
 export * from './use-scroll-list-position.js';
-export * from './use-scroll-list-scroll-to-selected.js';
+export * from './use-scroll-list-scroll-to-focused.js';
diff --git a/...oks/use-scroll-list-scroll-to-selected.ts → ...ooks/use-scroll-list-scroll-to-focused.ts b/...oks/use-scroll-list-scroll-to-selected.ts → ...ooks/use-scroll-list-scroll-to-focused.ts
@@ -2,7 +2,7 @@ import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef }
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
 import type { DimensionsById } from '../../common/index.js';
 import type { ListProps } from '../../list/list.js';
-import type { ScrollListProps } from '../../scroll-list/scroll-list.js';
+import type { ScrollListProps } from '../scroll-list.js';
 
 export const useScrollListScrollToFocused = <T, EL extends HTMLElement>({
     scrollToFocused,
@@ -33,7 +33,7 @@ export const useScrollListScrollToFocused = <T, EL extends HTMLElement>({
 }) => {
     const loadingTimeout = useRef(0);
     const timeout = useRef(0);
-    const isScrollingToSelection = useRef(false);
+    const isScrollingToFocused = useRef(false);
     const focusedIndex = useMemo(() => items.findIndex((i) => getId(i) === focused), [items, getId, focused]);
     const calculateDistance = useCallback(
         ({ itemIndex, direction }: { itemIndex: number; direction: 'up' | 'down' }) => {
@@ -62,7 +62,7 @@ export const useScrollListScrollToFocused = <T, EL extends HTMLElement>({
         [averageItemSize, extraRenderSize, getId, isHorizontal, items, itemsDimensions, scrollWindowSize, focusedIndex],
     );
     const cleanUp = () => {
-        isScrollingToSelection.current = false;
+        isScrollingToFocused.current = false;
         loadingTimeout.current = 0;
         clearTimeout(timeout.current);
     };
@@ -78,7 +78,7 @@ export const useScrollListScrollToFocused = <T, EL extends HTMLElement>({
                 const node = scrollListRef.current?.querySelector(`[data-id='${getId(items[focusedIndex]!)}']`);
                 if (!node) {
                     timeout.current = window.setTimeout(
-                        () => isScrollingToSelection.current && scrollTo(focusedIndex, true),
+                        () => isScrollingToFocused.current && scrollTo(focusedIndex, true),
                     );
                 } else {
                     scrollIntoViewIfNeeded(node, {
@@ -112,8 +112,8 @@ export const useScrollListScrollToFocused = <T, EL extends HTMLElement>({
     );
 
     useEffect(() => {
-        if (scrollToFocused && focusedIndex > -1 && mountedItems.current.size > 0 && !isScrollingToSelection.current) {
-            isScrollingToSelection.current = true;
+        if (scrollToFocused && focusedIndex > -1 && mountedItems.current.size > 0 && !isScrollingToFocused.current) {
+            isScrollingToFocused.current = true;
 
             scrollTo(focusedIndex);
         }