diff --git a/packages/ui/src/components/unified-picker.tsx b/packages/ui/src/components/unified-picker.tsx index 088bc11e..0abc00be 100644 --- a/packages/ui/src/components/unified-picker.tsx +++ b/packages/ui/src/components/unified-picker.tsx @@ -103,6 +103,7 @@ const UnifiedPicker: Component = (props) => { let scrollContainerRef: HTMLDivElement | undefined let lastWorkspaceId: string | null = null let lastQuery = "" + let lastCommandQuery = "" let inflightWorkspaceId: string | null = null let inflightSnapshotPromise: Promise | null = null let activeRequestId = 0 @@ -243,6 +244,7 @@ const UnifiedPicker: Component = (props) => { setLoadingState("idle") lastWorkspaceId = null lastQuery = "" + lastCommandQuery = "" activeRequestId = 0 } @@ -273,8 +275,6 @@ const UnifiedPicker: Component = (props) => { } }) - - createEffect(() => { if (!props.open) return if (mode() !== "mention") return @@ -303,6 +303,37 @@ const UnifiedPicker: Component = (props) => { }) }) + createEffect(() => { + if (!props.open) return + if (mode() !== "command") return + + const query = props.searchQuery + const count = filteredCommands().length + + if (query !== lastCommandQuery) { + lastCommandQuery = query + setSelectedIndex(0) + resetScrollPosition() + return + } + + if (count <= 0) { + if (selectedIndex() !== 0) { + setSelectedIndex(0) + } + return + } + + const current = selectedIndex() + if (current < 0) { + setSelectedIndex(0) + return + } + if (current >= count) { + setSelectedIndex(count - 1) + } + }) + const allItems = (): PickerItem[] => { const items: PickerItem[] = [] if (mode() === "command") { @@ -335,20 +366,24 @@ const UnifiedPicker: Component = (props) => { if (e.key === "ArrowDown") { e.preventDefault() + e.stopPropagation() setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1)) scrollToSelected() } else if (e.key === "ArrowUp") { e.preventDefault() + e.stopPropagation() setSelectedIndex((prev) => Math.max(prev - 1, 0)) scrollToSelected() } else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault() + e.stopPropagation() const selected = items[selectedIndex()] if (selected) { handleSelect(selected) } } else if (e.key === "Escape") { e.preventDefault() + e.stopPropagation() props.onClose() } } @@ -402,12 +437,12 @@ const UnifiedPicker: Component = (props) => { 0}> - {(command) => { - const itemIndex = allItems().findIndex((item) => item.type === "command" && item.command.name === command.name) + {(command, index) => { + const isSelected = () => index() === selectedIndex() return (
handleSelect({ type: "command", command })} >