diff --git a/.changeset/dirty-plants-sort.md b/.changeset/dirty-plants-sort.md new file mode 100644 index 00000000000..80d1e3bd82b --- /dev/null +++ b/.changeset/dirty-plants-sort.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Now items in the Chat context menu will not be auto selected if your cursor is already on the row when the items change diff --git a/webview-ui/src/components/chat/ContextMenu.tsx b/webview-ui/src/components/chat/ContextMenu.tsx index f29be07a29d..d295d068cea 100644 --- a/webview-ui/src/components/chat/ContextMenu.tsx +++ b/webview-ui/src/components/chat/ContextMenu.tsx @@ -32,6 +32,9 @@ interface ContextMenuProps { commands?: Command[] } +const EMPTY_COMMANDS: Command[] = [] // kilocode_change - maintain stable references for React props +const EMPTY_SEARCH_RESULTS: SearchResult[] = [] // kilocode_change - maintain stable references for React props + const ContextMenu: React.FC = ({ onSelect, searchQuery, @@ -41,8 +44,8 @@ const ContextMenu: React.FC = ({ selectedType, queryItems, modes, - dynamicSearchResults = [], - commands = [], + dynamicSearchResults = EMPTY_SEARCH_RESULTS, // kilocode_change + commands = EMPTY_COMMANDS, // kilocode_change }) => { const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("") const menuRef = useRef(null) @@ -51,6 +54,22 @@ const ContextMenu: React.FC = ({ return getContextMenuOptions(searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands) }, [searchQuery, selectedType, queryItems, dynamicSearchResults, modes, commands]) + // kilocode_change start - disable hover selection briefly when items change to prevent accidental selections + const [allowSelection, setAllowSelection] = useState(false) + const prevOptionsRef = useRef(null) + + useEffect(() => { + if (prevOptionsRef.current === null || filteredOptions !== prevOptionsRef.current) { + setAllowSelection(false) + const timer = setTimeout(() => { + setAllowSelection(true) + }, 100) + return () => clearTimeout(timer) + } + prevOptionsRef.current = filteredOptions + }, [filteredOptions]) + // kilocode_change end - disable hover selection briefly when items change to prevent accidental selections + useEffect(() => { if (menuRef.current) { const selectedElement = menuRef.current.children[selectedIndex] as HTMLElement @@ -373,7 +392,13 @@ const ContextMenu: React.FC = ({ } : {}), }} - onMouseEnter={() => isOptionSelectable(option) && setSelectedIndex(index)}> + onMouseEnter={() => { + // kilocode_change start - add allowEvents check + if (allowSelection && isOptionSelectable(option)) { + setSelectedIndex(index) + } + // kilocode_change end - add allowEvents check + }}>