fix Dropdown lists are sometimes left for revealing words after click…

…ing on other sells
madfish-solutions · Oct 17, 2023 · bb2ee60 · bb2ee60
1 parent 4d9d93b
commit bb2ee60
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/app/atoms/FormField.tsx b/src/app/atoms/FormField.tsx
@@ -109,7 +109,7 @@ export const FormField = forwardRef<FormFieldElement, FormFieldProps>(
     const secret = secretProp && textarea;
     const Field = textarea ? 'textarea' : 'input';
 
-    const [passwordInputType, RevealPasswordIcon] = usePasswordToggle(smallPaddings, onReveal, revealRef, onBlur);
+    const [passwordInputType, RevealPasswordIcon] = usePasswordToggle(smallPaddings, id, onReveal, revealRef, onBlur);
     const isPasswordInput = type === 'password';
     const inputType = isPasswordInput ? passwordInputType : type;
 

diff --git a/src/app/atoms/usePasswordToggle.hook.tsx b/src/app/atoms/usePasswordToggle.hook.tsx
@@ -9,6 +9,7 @@ import { useDidUpdate, useTimeout } from 'lib/ui/hooks';
 
 const usePasswordToggle = (
   smallPaddings: boolean,
+  id?: string,
   onReveal?: EmptyFn,
   revealRef?: unknown,
   handleBlur?: (e: React.FocusEvent) => void
@@ -24,6 +25,7 @@ const usePasswordToggle = (
   const Icon = useMemo(
     () => (
       <button
+        id={id}
         type="button"
         tabIndex={1}
         className={clsx('absolute inset-y-0', smallPaddings ? 'right-2' : 'right-3')}

diff --git a/src/app/templates/SeedPhraseInput/SeedWordInput.tsx b/src/app/templates/SeedPhraseInput/SeedWordInput.tsx
@@ -120,12 +120,17 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
     [setValueToVariant]
   );
 
-  const handleBlur = useCallback((e: React.FocusEvent) => {
-    if (e.relatedTarget?.tagName !== BUTTON_TAG_NAME) {
-      setIsBlur(true);
-      setFocusedVariantIndex(-1);
-    }
-  }, []);
+  const handleBlur = useCallback(
+    (e: React.FocusEvent) => {
+      const tag = e.relatedTarget?.tagName;
+
+      if (tag !== BUTTON_TAG_NAME || (tag === BUTTON_TAG_NAME && e.relatedTarget?.id !== id.toString())) {
+        setIsBlur(true);
+        setFocusedVariantIndex(-1);
+      }
+    },
+    [id]
+  );
 
   const handleInputKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {