From d8953b1284292386e0a8cc0e85d08d37e8155873 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 1 Sep 2023 16:27:53 +0300
Subject: [PATCH] fix: propagation with other event

---
 .../KeyGeneration/AutocompleteInput.tsx         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
index fbc6538d..cf9c3159 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
@@ -37,17 +37,26 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
   }
 
   const handleSuggestionClick = (suggestion: string) => {
+    setIsFocused(false)
     dispatch(setWord({ index, word: suggestion }))
   }
 
+  const handleInputFocus = () => {
+    setIsFocused(true)
+  }
+
+  const handleInputBlur = () => {
+    setIsFocused(false)
+  }
+
   return (
-    <div>
+    <div className="autocomplete-container">
       <input
         type="text"
         value={word}
         onChange={handleInputChange}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
       />
       {isFocused && (
         <div className="suggestion-list">
@@ -55,7 +64,7 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
             <div
               key={suggestion}
               className="suggestion-item"
-              onClick={() => handleSuggestionClick(suggestion)}
+              onMouseDown={() => handleSuggestionClick(suggestion)}
             >
               {suggestion}
             </div>