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);