fix(ui): prevent accidental hover selections in context menu

.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

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<ContextMenuProps> = ({
 	onSelect,
 	searchQuery,
@@ -41,8 +44,8 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 	selectedType,
 	queryItems,
 	modes,
-	dynamicSearchResults = [],
-	commands = [],
+	dynamicSearchResults = EMPTY_SEARCH_RESULTS, // kilocode_change
+	commands = EMPTY_COMMANDS, // kilocode_change
 }) => {
 	const [materialIconsBaseUri, setMaterialIconsBaseUri] = useState("")
 	const menuRef = useRef<HTMLDivElement>(null)
@@ -51,6 +54,22 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		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<ContextMenuQueryItem[] | null>(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<ContextMenuProps> = ({
 										}
 									: {}),
 							}}
-							onMouseEnter={() => isOptionSelectable(option) && setSelectedIndex(index)}>
+							onMouseEnter={() => {
+								// kilocode_change start - add allowEvents check
+								if (allowSelection && isOptionSelectable(option)) {
+									setSelectedIndex(index)
+								}
+								// kilocode_change end - add allowEvents check
+							}}>
 							<div
 								style={{
 									display: "flex",