Revert "Always focus the panel when clicked to ensure menu buttons are visible" (#4592)

Revert "Always focus the panel when clicked to ensure menu buttons are visibl…"

This reverts commit 1b1e5a20f1.

.changeset/khaki-clocks-float.md

@@ -1,5 +0,0 @@
----
-"roo-cline": patch
----
-
-Always focus the panel when clicked to ensure menu buttons are available

packages/telemetry/src/TelemetryService.ts

@@ -173,7 +173,7 @@ export class TelemetryService {
 			itemType,
 			itemName,
 			target,
-			...(properties || {}),
+			... (properties || {}),
 		})
 	}
 

packages/types/src/vscode.ts

@@ -51,7 +51,6 @@ export const commandIds = [
 
 	"focusInput",
 	"acceptInput",
-	"focusPanel",
 ] as const
 
 export type CommandId = (typeof commandIds)[number]

src/activate/registerCommands.ts

@@ -8,7 +8,6 @@ import { Package } from "../shared/package"
 import { getCommand } from "../utils/commands"
 import { ClineProvider } from "../core/webview/ClineProvider"
 import { ContextProxy } from "../core/config/ContextProxy"
-import { focusPanel } from "../utils/focusPanel"
 
 import { registerHumanRelayCallback, unregisterHumanRelayCallback, handleHumanRelayResponse } from "./humanRelay"
 import { handleNewTask } from "./handleTask"
@@ -173,23 +172,20 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
 	},
 	focusInput: async () => {
 		try {
-			await focusPanel(tabPanel, sidebarPanel)
+			const panel = getPanel()
 
-			// Send focus input message only for sidebar panels
-			if (sidebarPanel && getPanel() === sidebarPanel) {
+			if (!panel) {
+				await vscode.commands.executeCommand(`workbench.view.extension.${Package.name}-ActivityBar`)
+			} else if (panel === tabPanel) {
+				panel.reveal(vscode.ViewColumn.Active, false)
+			} else if (panel === sidebarPanel) {
+				await vscode.commands.executeCommand(`${ClineProvider.sideBarId}.focus`)
 				provider.postMessageToWebview({ type: "action", action: "focusInput" })
 			}
 		} catch (error) {
 			outputChannel.appendLine(`Error focusing input: ${error}`)
 		}
 	},
-	focusPanel: async () => {
-		try {
-			await focusPanel(tabPanel, sidebarPanel)
-		} catch (error) {
-			outputChannel.appendLine(`Error focusing panel: ${error}`)
-		}
-	},
 	acceptInput: () => {
 		const visibleProvider = getVisibleProviderOrLog(outputChannel)
 

src/core/webview/webviewMessageHandler.ts

@@ -1475,11 +1475,6 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
-		case "focusPanelRequest": {
-			// Execute the focusPanel command to focus the WebView
-			await vscode.commands.executeCommand(getCommand("focusPanel"))
-			break
-		}
 		case "filterMarketplaceItems": {
 			// Check if marketplace is enabled before making API calls
 			const { experiments } = await provider.getState()

src/shared/WebviewMessage.ts

@@ -150,7 +150,6 @@ export interface WebviewMessage {
 		| "clearIndexData"
 		| "indexingStatusUpdate"
 		| "indexCleared"
-		| "focusPanelRequest"
 		| "codebaseIndexConfig"
 		| "setHistoryPreviewCollapsed"
 		| "openExternal"

src/utils/focusPanel.ts

@@ -1,27 +0,0 @@
-import * as vscode from "vscode"
-import { Package } from "../shared/package"
-import { ClineProvider } from "../core/webview/ClineProvider"
-
-/**
- * Focus the active panel (either tab or sidebar)
- * @param tabPanel - The tab panel reference
- * @param sidebarPanel - The sidebar panel reference
- * @returns Promise that resolves when focus is complete
- */
-export async function focusPanel(
-	tabPanel: vscode.WebviewPanel | undefined,
-	sidebarPanel: vscode.WebviewView | undefined,
-): Promise<void> {
-	const panel = tabPanel || sidebarPanel
-
-	if (!panel) {
-		// If no panel is open, open the sidebar
-		await vscode.commands.executeCommand(`workbench.view.extension.${Package.name}-ActivityBar`)
-	} else if (panel === tabPanel) {
-		// For tab panels, use reveal to focus
-		panel.reveal(vscode.ViewColumn.Active, false)
-	} else if (panel === sidebarPanel) {
-		// For sidebar panels, focus the sidebar
-		await vscode.commands.executeCommand(`${ClineProvider.sideBarId}.focus`)
-	}
-}

webview-ui/src/App.tsx

@@ -18,7 +18,6 @@ import { MarketplaceView } from "./components/marketplace/MarketplaceView"
 import ModesView from "./components/modes/ModesView"
 import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog"
 import { AccountView } from "./components/account/AccountView"
-import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
 
 type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
 
@@ -136,13 +135,6 @@ const App = () => {
 	// Tell the extension that we are ready to receive messages.
 	useEffect(() => vscode.postMessage({ type: "webviewDidLaunch" }), [])
 
-	// Focus the WebView when non-interactive content is clicked
-	useAddNonInteractiveClickListener(
-		useCallback(() => {
-			vscode.postMessage({ type: "focusPanelRequest" })
-		}, []),
-	)
-
 	if (!didHydrateState) {
 		return null
 	}

webview-ui/src/components/ui/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from "./useClipboard"
 export * from "./useRooPortal"
-export * from "./useNonInteractiveClick"

webview-ui/src/components/ui/hooks/useNonInteractiveClick.ts

@@ -1,34 +0,0 @@
-import { useEffect } from "react"
-
-/**
- * Hook that listens for clicks on non-interactive elements and calls the provided handler.
- *
- * Interactive elements (inputs, textareas, selects, contentEditable) are excluded
- * to avoid disrupting user typing or form interactions.
- *
- * @param handler - Function to call when a non-interactive element is clicked
- */
-export function useAddNonInteractiveClickListener(handler: () => void) {
-	useEffect(() => {
-		const handleContentClick = (e: MouseEvent) => {
-			const target = e.target as HTMLElement
-
-			// Don't trigger for input elements to avoid disrupting typing
-			if (
-				target.tagName !== "INPUT" &&
-				target.tagName !== "TEXTAREA" &&
-				target.tagName !== "SELECT" &&
-				!target.isContentEditable
-			) {
-				handler()
-			}
-		}
-
-		// Add listener to the document body to handle all clicks
-		document.body.addEventListener("click", handleContentClick)
-
-		return () => {
-			document.body.removeEventListener("click", handleContentClick)
-		}
-	}, [handler])
-}