Use form for search

poac-dev · Dec 27, 2023 · bd0dced · bd0dced
1 parent 42b1fce
commit bd0dced
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/app/_components/search.tsx b/app/_components/search.tsx
@@ -10,30 +10,31 @@ export function SearchButton() {
     const [value, setValue] = useState("");
     const router = useRouter();
 
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            router.push(`/search?q=${value}`);
-        }
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault(); // Prevent the form from refreshing the page
+        router.push(`/search?q=${value}`);
     };
 
     return (
-        <Input
-            type="search"
-            placeholder="Search packages"
-            aria-label="Search packages"
-            labelPlacement="outside"
-            startContent={
-                <FontAwesomeIcon
-                    className="text-default-600 dark:text-default-500"
-                    icon={faMagnifyingGlass}
-                    width={13}
-                />
-            }
-            value={value}
-            onValueChange={setValue}
-            onKeyDown={handleKeyDown}
-        >
-            Search packages
-        </Input>
+        <form onSubmit={handleSearch}>
+            <Input
+                type="search"
+                placeholder="Search packages"
+                aria-label="Search packages"
+                labelPlacement="outside"
+                startContent={
+                    <FontAwesomeIcon
+                        className="text-default-600 dark:text-default-500"
+                        icon={faMagnifyingGlass}
+                        width={13}
+                    />
+                }
+                value={value}
+                onValueChange={setValue}
+                // onKeyDown={handleKeyDown}
+            >
+                Search packages
+            </Input>
+        </form>
     );
 }
diff --git a/middleware.ts b/middleware.ts
@@ -6,7 +6,7 @@ export function middleware(request: NextRequest) {
     const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
     const cspHeader = `
     default-src 'self';
-    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' static.cloudflareinsights.com 'unsafe-inline' ${
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' static.cloudflareinsights.com ${
         IS_DEV ? "'unsafe-eval'" : ""
     };
     style-src 'self' 'nonce-${nonce}';