diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx index 8961fc7f5d..bbba0027e1 100644 --- a/webview-ui/src/components/chat/AutoApproveMenu.tsx +++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx @@ -185,7 +185,14 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => { cursor: "pointer", }} onClick={toggleExpanded}> -
e.stopPropagation()}> +
{ + e.stopPropagation() + // If no options are selected, clicking the checkbox area should expand the menu + if (!hasEnabledOptions) { + setIsExpanded(true) + } + }}> { setAutoApprovalEnabled(newValue) vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue }) } - // If no options enabled, do nothing + // If no options enabled, the onClick handler above will expand the menu }} /> diff --git a/webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx b/webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx index 185e5eeec6..2001c9b1e5 100644 --- a/webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx +++ b/webview-ui/src/components/chat/__tests__/AutoApproveMenu.spec.tsx @@ -115,7 +115,7 @@ describe("AutoApproveMenu", () => { expect(screen.getByText("Read-only operations")).toBeInTheDocument() }) - it("should not allow toggling master checkbox when no options are selected", () => { + it("should expand menu when clicking checkbox area with no options selected", async () => { ;(useExtensionState as ReturnType).mockReturnValue({ ...defaultExtensionState, autoApprovalEnabled: false, @@ -124,12 +124,18 @@ describe("AutoApproveMenu", () => { render() - // Click on the master checkbox + // Click on the checkbox container (since the checkbox itself is disabled) const masterCheckbox = screen.getByRole("checkbox") - fireEvent.click(masterCheckbox) + const checkboxContainer = masterCheckbox.parentElement + fireEvent.click(checkboxContainer!) // Should not send any message since no options are selected expect(mockPostMessage).not.toHaveBeenCalled() + + // But should expand the menu to show options + await waitFor(() => { + expect(screen.getByTestId("always-allow-readonly-toggle")).toBeInTheDocument() + }) }) it("should toggle master checkbox when options are selected", () => {