From ff130bfb9ec45f9bbf9c04c856e7b3141be26bfd Mon Sep 17 00:00:00 2001
From: samir-byte <kiranpoudel28@gmail.com>
Date: Tue, 13 Aug 2024 09:07:33 +0545
Subject: [PATCH] fix: focus disappears issue

---
 .../request/input/request-parameters.tsx      |  2 +-
 src/hooks/use-debounce.ts                     | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/use-debounce.ts

diff --git a/src/app/api-testing/(components)/request/input/request-parameters.tsx b/src/app/api-testing/(components)/request/input/request-parameters.tsx
index 2939984..06eaaf9 100644
--- a/src/app/api-testing/(components)/request/input/request-parameters.tsx
+++ b/src/app/api-testing/(components)/request/input/request-parameters.tsx
@@ -84,7 +84,7 @@ export function RequestParameters() {
             {parameters.map((parameter, index) => {
               return (
                 <RequestParameter
-                  key={`${parameter.key}-${index}`}
+                  key={index}
                   data={parameter}
                   onDelete={() => {
                     onDelete(index);
diff --git a/src/hooks/use-debounce.ts b/src/hooks/use-debounce.ts
new file mode 100644
index 0000000..564019f
--- /dev/null
+++ b/src/hooks/use-debounce.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    // Update debounced value after delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Cancel the timeout if value or delay changes
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;