diff --git a/interface/app/$libraryId/Explorer/View/GridList.tsx b/interface/app/$libraryId/Explorer/View/GridList.tsx index 850acc79e..dd452aecc 100644 --- a/interface/app/$libraryId/Explorer/View/GridList.tsx +++ b/interface/app/$libraryId/Explorer/View/GridList.tsx @@ -164,6 +164,25 @@ export default ({ children }: { children: RenderItem }) => { return grid.getItem(index) ?? null; } + function getActiveItem(elements: Element[]) { + // Get selected item with least index. + // Might seem kinda weird but it's the same behaviour as Finder. + const activeItem = + elements.reduce( + (least, current) => { + const currentItem = getElementItem(current); + if (!currentItem) return least; + + if (!least) return currentItem; + + return currentItem.index < least.index ? currentItem : least; + }, + null as ReturnType + )?.data ?? null; + + return activeItem; + } + useEffect( () => { const element = explorer.scrollRef.current; @@ -200,6 +219,8 @@ export default ({ children }: { children: RenderItem }) => { selectoUnSelected.current = set; selecto.current.setSelectedTargets(items as HTMLElement[]); + activeItem.current = getActiveItem(items); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [grid.columnCount, explorer.items]); @@ -355,21 +376,7 @@ export default ({ children }: { children: RenderItem }) => { setDragFromThumbnail(false); const allSelected = selecto.current?.getSelectedTargets() ?? []; - - // Sets active item to selected item with least index. - // Might seem kinda weird but it's the same behaviour as Finder. - activeItem.current = - allSelected.reduce( - (least, current) => { - const currentItem = getElementItem(current); - if (!currentItem) return least; - - if (!least) return currentItem; - - return currentItem.index < least.index ? currentItem : least; - }, - null as ReturnType - )?.data ?? null; + activeItem.current = getActiveItem(allSelected); }} onScroll={({ direction }) => { selecto.current?.findSelectableTargets();