diff --git a/apps/web/src/components/list-container/index.tsx b/apps/web/src/components/list-container/index.tsx index 86a42b1c1..401bdb251 100644 --- a/apps/web/src/components/list-container/index.tsx +++ b/apps/web/src/components/list-container/index.tsx @@ -136,7 +136,7 @@ function ListContainer(props: ListContainerProps) { }; }, [items]); - const { onFocus, onMouseDown, onKeyDown } = useKeyboardListNavigation({ + const { onMouseUp, onKeyDown } = useKeyboardListNavigation({ length: items.length, reset: () => toggleSelection(false), deselect: (index) => { @@ -228,8 +228,7 @@ function ListContainer(props: ListContainerProps) { focusGroup: setFocusedGroupIndex, context, compact, - onMouseDown, - onFocus + onMouseUp }} itemContent={(index, _data, context) => ( @@ -280,8 +279,7 @@ type ListContext = { context?: Context; compact?: boolean; - onMouseDown: (e: MouseEvent, itemIndex: number) => void; - onFocus: (itemIndex: number) => void; + onMouseUp: (e: MouseEvent, itemIndex: number) => void; }; function ItemRenderer({ index, @@ -437,9 +435,8 @@ function VirtuosoItem({ return (
context?.onFocus(props["data-item-index"])} - onMouseDown={(e) => - context?.onMouseDown(e.nativeEvent, props["data-item-index"]) + onMouseUp={(e) => + context?.onMouseUp(e.nativeEvent, props["data-item-index"]) } > {props.children} diff --git a/apps/web/src/hooks/use-keyboard-list-navigation.ts b/apps/web/src/hooks/use-keyboard-list-navigation.ts index f75a1b988..425ec766e 100644 --- a/apps/web/src/hooks/use-keyboard-list-navigation.ts +++ b/apps/web/src/hooks/use-keyboard-list-navigation.ts @@ -62,10 +62,6 @@ export function useKeyboardListNavigation( : DIRECTION.UP; }, []); - const onFocus = useCallback((itemIndex: number) => { - cursor.current = itemIndex; - }, []); - const resetSelection = useCallback(() => { reset(); anchor.current = -1; @@ -79,8 +75,9 @@ export function useKeyboardListNavigation( return true; }, [open, resetSelection, select]); - const onMouseDown = useCallback( + const onMouseUp = useCallback( (e: MouseEvent, itemIndex: number) => { + if (e.button !== 0) return; if (e.ctrlKey || e.metaKey) { select(itemIndex, true); } else if (e.shiftKey) { @@ -95,10 +92,11 @@ export function useKeyboardListNavigation( } bulkSelect(indices); focusItemAt(endIndex); - } else if (e.button === 0) { + } else { resetSelection(); select(itemIndex); } + cursor.current = itemIndex; }, [select, resetSelection, bulkSelect, skip, focusItemAt] ); @@ -117,6 +115,7 @@ export function useKeyboardListNavigation( while (skip && skip(nextIndex)) nextIndex = moveUpCyclic(nextIndex, max); focusItemAt(nextIndex); + cursor.current = nextIndex; return true; }, ArrowDown: () => { @@ -126,6 +125,7 @@ export function useKeyboardListNavigation( while (skip && skip(nextIndex)) nextIndex = moveDownCyclic(nextIndex, max); focusItemAt(nextIndex); + cursor.current = nextIndex; return true; }, "Mod-a": () => { @@ -148,9 +148,11 @@ export function useKeyboardListNavigation( if (nextIndex === cursor.current) return false; focusItemAt(nextIndex); + cursor.current = nextIndex; if (direction() === DIRECTION.UP) { select(nextIndex); } + e.preventDefault(); return false; }, "Shift-ArrowDown": () => { @@ -168,9 +170,11 @@ export function useKeyboardListNavigation( if (nextIndex === cursor.current) return false; focusItemAt(nextIndex); + cursor.current = nextIndex; if (direction() === DIRECTION.DOWN) { select(nextIndex); } + e.preventDefault(); return false; }, Escape: () => { @@ -185,13 +189,14 @@ export function useKeyboardListNavigation( resetSelection, skip, focusItemAt, - select, + bulkSelect, direction, + select, deselect ] ); - return { onFocus, onMouseDown, onKeyDown }; + return { onMouseUp, onKeyDown }; } const moveDownCyclic = (i: number, max: number) => (i < max ? ++i : 0);