blur fix

madfish-solutions · Oct 17, 2023 · 5a14b29 · 5a14b29
1 parent bb2ee60
commit 5a14b29
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/app/atoms/usePasswordToggle.hook.tsx b/src/app/atoms/usePasswordToggle.hook.tsx
@@ -16,6 +16,8 @@ const usePasswordToggle = (
 ): ['text' | 'password', JSX.Element] => {
   const [visible, setVisibility] = useState(false);
 
+  const buttonId = useMemo(() => (id ? `passwordToggle-${id}` : undefined), [id]);
+
   const hide = useCallback(() => void setVisibility(false), []);
 
   useDidUpdate(hide, [revealRef]);
@@ -25,7 +27,7 @@ const usePasswordToggle = (
   const Icon = useMemo(
     () => (
       <button
-        id={id}
+        id={buttonId}
         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
@@ -22,8 +22,6 @@ export interface SeedWordInputProps extends TestIDProperty {
   onPaste?: (e: React.ClipboardEvent<FormFieldElement>) => void;
 }
 
-const BUTTON_TAG_NAME = 'BUTTON';
-
 export const SeedWordInput: FC<SeedWordInputProps> = ({
   id,
   inputsRef,
@@ -122,12 +120,12 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
 
   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);
+      if (checkRelatedTarget(id, e.relatedTarget?.id)) {
+        return;
       }
+
+      setIsBlur(true);
+      setFocusedVariantIndex(-1);
     },
     [id]
   );
@@ -224,6 +222,7 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
           {autoCompleteVariants.map((variant, index) => (
             <button
               key={variant}
+              id="autoCompleteVariant"
               ref={el => (variantsRef.current[index] = el)}
               className={classNames(
                 'mt-2 px-3 py-2 w-full text-left rounded text-gray-600',
@@ -243,3 +242,15 @@ export const SeedWordInput: FC<SeedWordInputProps> = ({
     </div>
   );
 };
+
+const checkRelatedTarget = (inputId: number, targetId?: string) => {
+  if (!targetId) {
+    return false;
+  }
+
+  if (targetId === 'autoCompleteVariant') {
+    return true;
+  }
+
+  return targetId.startsWith('passwordToggle') && targetId.split('-')[1] === inputId.toString();
+};
diff --git a/src/app/templates/SeedPhraseInput/index.tsx b/src/app/templates/SeedPhraseInput/index.tsx
@@ -8,7 +8,7 @@ import { formatMnemonic } from 'app/defaults';
 import { useAppEnv } from 'app/env';
 import { TestIDProperty } from 'lib/analytics';
 import { T, t } from 'lib/i18n';
-import { clearClipboard } from 'lib/ui/utils';
+//import { clearClipboard } from 'lib/ui/utils';
 
 import { SeedLengthSelect } from './SeedLengthSelect/SeedLengthSelect';
 import { SeedWordInput, SeedWordInputProps } from './SeedWordInput';
@@ -118,7 +118,7 @@ export const SeedPhraseInput: FC<SeedPhraseInputProps> = ({
 
       resetRevealRef();
       onSeedChange(newDraftSeed);
-      clearClipboard();
+      //clearClipboard();
     },
     [numberOfWords, onSeedChange, pasteFailed, setPasteFailed, resetRevealRef, setNumberOfWords]
   );