From 8032f11d3064eba62a95e111db5d97ba4032856e Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sat, 4 Jan 2025 14:59:59 +0100
Subject: [PATCH] NORY-41: refactor search to react on "enter" pressed

---
 dashboard/src/components/search-input.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/components/search-input.tsx b/dashboard/src/components/search-input.tsx
index d40dd65..50e2d6a 100644
--- a/dashboard/src/components/search-input.tsx
+++ b/dashboard/src/components/search-input.tsx
@@ -2,7 +2,7 @@
 
 import { Input } from '@/components/ui/input';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { ChangeEvent, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, useState } from 'react';
 
 interface SearchInputProps {
     value: string;
@@ -18,9 +18,10 @@ export function SearchInput({ value, placeholder, pageParamKey, queryParamKey, t
     const router = useRouter();
     const params = useSearchParams();
 
-    const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const [searchInput, setSearchInput] = useState(value);
+
+    const onSearchChange = (value: string) => {
 
-        const value = event.target.value;
         const newParams = new URLSearchParams(params.toString());
 
         if (value.length < 1) {
@@ -34,12 +35,19 @@ export function SearchInput({ value, placeholder, pageParamKey, queryParamKey, t
         router.replace('?' + newParams.toString());
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            onSearchChange(searchInput);
+        }
+    };
+
     return (
         <Input
-            value={value}
+            value={searchInput}
             type={type ?? 'text'}
             placeholder={placeholder}
             className={className}
-            onChange={onSearchChange}/>
+            onChange={(e) => setSearchInput(e.target.value)}
+            onKeyDown={handleKeyDown}/>
     );
 }