fix Memory leak risk in ChatTextArea.tsx

Author: j-east

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -225,35 +225,28 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			setInputValue,
 		})
 
-		// Handle modifier key detection for mention clicks
-		const handleGlobalKeyDown = useCallback(
-			(e: KeyboardEvent) => {
+		// Add global event listeners for modifier key detection
+		useEffect(() => {
+			const handleGlobalKeyDown = (e: KeyboardEvent) => {
 				if ((isMac && e.metaKey) || (!isMac && e.ctrlKey)) {
 					setIsModifierPressed(true)
 				}
-			},
-			[isMac],
-		)
+			}
 
-		const handleGlobalKeyUp = useCallback(
-			(e: KeyboardEvent) => {
+			const handleGlobalKeyUp = (e: KeyboardEvent) => {
 				if ((isMac && !e.metaKey) || (!isMac && !e.ctrlKey)) {
 					setIsModifierPressed(false)
 				}
-			},
-			[isMac],
-		)
+			}
 
-		// Add global event listeners for modifier key detection
-		useEffect(() => {
 			document.addEventListener("keydown", handleGlobalKeyDown)
 			document.addEventListener("keyup", handleGlobalKeyUp)
 
 			return () => {
 				document.removeEventListener("keydown", handleGlobalKeyDown)
 				document.removeEventListener("keyup", handleGlobalKeyUp)
 			}
-		}, [handleGlobalKeyDown, handleGlobalKeyUp])
+		}, [isMac])
 
 		// Handle clicks on mentions in the highlight layer
 		const handleMentionClick = useCallback(
@@ -273,6 +266,27 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			[isModifierPressed],
 		)
 
+		// Handle keyboard events on mentions for accessibility
+		const handleMentionKeyDown = useCallback(
+			(e: KeyboardEvent) => {
+				if (!isModifierPressed) return
+
+				const target = e.target as HTMLElement
+				if (target.tagName === "MARK" && target.classList.contains("mention-context-textarea-highlight")) {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault()
+						const mentionText = target.textContent
+						if (mentionText) {
+							// Remove @ symbol if present and send to VSCode
+							const cleanText = mentionText.startsWith("@") ? mentionText.slice(1) : mentionText
+							vscode.postMessage({ type: "openMention", text: cleanText })
+						}
+					}
+				}
+			},
+			[isModifierPressed],
+		)
+
 		// Fetch git commits when Git is selected or when typing a hash.
 		useEffect(() => {
 			if (selectedType === ContextMenuOptionType.Git || /^[a-f0-9]+$/i.test(searchQuery)) {
@@ -771,14 +785,18 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 			// Determine the class to use based on modifier key state
 			const mentionClass = `mention-context-textarea-highlight${isModifierPressed ? " clickable" : ""}`
+			const tabIndex = isModifierPressed ? 0 : -1
+			const ariaLabel = isModifierPressed
+				? `${isMac ? "Cmd" : "Ctrl"} + Click or Enter to open`
+				: `Hold ${isMac ? "Cmd" : "Ctrl"} + Click to open`
 
 			// Process the text to highlight mentions and valid commands
 			let processedText = text
 				.replace(/\n$/, "\n\n")
 				.replace(/[<>&]/g, (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" })[c] || c)
 				.replace(
 					mentionRegexGlobal,
-					`<mark class="${mentionClass}" title="${isModifierPressed ? `${isMac ? "Cmd" : "Ctrl"} + Click to open` : `Hold ${isMac ? "Cmd" : "Ctrl"} + Click to open`}">$&</mark>`,
+					`<mark class="${mentionClass}" tabindex="${tabIndex}" role="button" aria-label="${ariaLabel}" title="${ariaLabel}">$&</mark>`,
 				)
 
 			// Custom replacement for commands - only highlight valid ones
@@ -791,10 +809,10 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 					if (startsWithSpace) {
 						// Keep the space but only highlight the command part
-						return ` <mark class="${mentionClass}" title="${isModifierPressed ? `${isMac ? "Cmd" : "Ctrl"} + Click to open` : `Hold ${isMac ? "Cmd" : "Ctrl"} + Click to open`}">${commandPart}</mark>`
+						return ` <mark class="${mentionClass}" tabindex="${tabIndex}" role="button" aria-label="${ariaLabel}" title="${ariaLabel}">${commandPart}</mark>`
 					} else {
 						// Highlight the entire command (starts at beginning of line)
-						return `<mark class="${mentionClass}" title="${isModifierPressed ? `${isMac ? "Cmd" : "Ctrl"} + Click to open` : `Hold ${isMac ? "Cmd" : "Ctrl"} + Click to open`}">${commandPart}</mark>`
+						return `<mark class="${mentionClass}" tabindex="${tabIndex}" role="button" aria-label="${ariaLabel}" title="${ariaLabel}">${commandPart}</mark>`
 					}
 				}
 				return match // Return unhighlighted if command is not valid
@@ -810,16 +828,18 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			updateHighlights()
 		}, [inputValue, updateHighlights])
 
-		// Add click event listener to highlight layer for mention clicks
+		// Add click and keyboard event listeners to highlight layer for mention interactions
 		useEffect(() => {
 			const highlightLayer = highlightLayerRef.current
 			if (highlightLayer) {
 				highlightLayer.addEventListener("click", handleMentionClick)
+				highlightLayer.addEventListener("keydown", handleMentionKeyDown)
 				return () => {
 					highlightLayer.removeEventListener("click", handleMentionClick)
+					highlightLayer.removeEventListener("keydown", handleMentionKeyDown)
 				}
 			}
-		}, [handleMentionClick])
+		}, [handleMentionClick, handleMentionKeyDown])
 
 		const updateCursorPosition = useCallback(() => {
 			if (textAreaRef.current) {

webview-ui/src/index.css

@@ -379,13 +379,6 @@ vscode-dropdown::part(listbox) {
 
 /* Context mentions */
 
-.mention-context-textarea-highlight {
-	background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
-	border-radius: 3px;
-	box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
-	color: transparent;
-}
-
 .mention-context-highlight {
 	background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
 	border-radius: 3px;