changeset

.changeset/mean-mangos-sell.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Fix add new rule file button not working

webview-ui/src/components/cline-rules/NewRuleRow.tsx

@@ -1,9 +1,10 @@
 import { useState, useRef, useEffect } from "react"
 import { vscode } from "@/utils/vscode"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { useClickAway } from "react-use"
 
 interface NewRuleRowProps {
-	isGlobal: boolean // To determine where to create the file
+	isGlobal: boolean
 }
 
 const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
@@ -12,6 +13,8 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 	const inputRef = useRef<HTMLInputElement>(null)
 	const [error, setError] = useState<string | null>(null)
 
+	const componentRef = useRef<HTMLDivElement>(null)
+
 	// Focus the input when expanded
 	useEffect(() => {
 		if (isExpanded && inputRef.current) {
@@ -19,6 +22,14 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 		}
 	}, [isExpanded])
 
+	useClickAway(componentRef, () => {
+		if (isExpanded) {
+			setIsExpanded(false)
+			setFilename("")
+			setError(null)
+		}
+	})
+
 	const getExtension = (filename: string): string => {
 		if (filename.startsWith(".") && !filename.includes(".", 1)) return ""
 		const match = filename.match(/\.[^.]+$/)
@@ -26,11 +37,12 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 	}
 
 	const isValidExtension = (ext: string): boolean => {
-		// Valid if it's empty (no extension) or .md or .txt
 		return ext === "" || ext === ".md" || ext === ".txt"
 	}
 
-	const handleCreateRule = () => {
+	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault()
+
 		if (filename.trim()) {
 			const trimmedFilename = filename.trim()
 			const extension = getExtension(trimmedFilename)
@@ -57,16 +69,8 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 		}
 	}
 
-	const handleBlur = () => {
-		setIsExpanded(false)
-		setError(null)
-		setFilename("")
-	}
-
 	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") {
-			handleCreateRule()
-		} else if (e.key === "Escape") {
+		if (e.key === "Escape") {
 			setIsExpanded(false)
 			setFilename("")
 		}
@@ -74,6 +78,7 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 
 	return (
 		<div
+			ref={componentRef}
 			className={`mb-2.5 transition-all duration-300 ease-in-out ${isExpanded ? "opacity-100" : "opacity-70 hover:opacity-100"}`}
 			onClick={() => !isExpanded && setIsExpanded(true)}>
 			<div
@@ -81,14 +86,13 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 					isExpanded ? "shadow-sm" : ""
 				}`}>
 				{isExpanded ? (
-					<>
+					<form onSubmit={handleSubmit} className="flex flex-1 items-center">
 						<input
 							ref={inputRef}
 							type="text"
 							placeholder="rule-name (.md, .txt, or no extension)"
 							value={filename}
 							onChange={(e) => setFilename(e.target.value)}
-							onBlur={handleBlur}
 							onKeyDown={handleKeyDown}
 							className="flex-1 bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-0 outline-0 rounded focus:outline-none focus:ring-0 focus:border-transparent"
 							style={{
@@ -99,14 +103,14 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal }) => {
 						<div className="flex items-center ml-2 space-x-2">
 							<VSCodeButton
 								appearance="icon"
+								type="submit"
 								aria-label="Create rule file"
 								title="Create rule file"
-								onClick={handleCreateRule}
 								style={{ padding: "0px" }}>
 								<span className="codicon codicon-add text-[14px]" />
 							</VSCodeButton>
 						</div>
-					</>
+					</form>
 				) : (
 					<>
 						<span className="flex-1 text-[var(--vscode-descriptionForeground)] bg-[var(--vscode-input-background)] italic text-xs">