From 001f6b28a6a1e54868dc1991cb6f1fff6e7d8188 Mon Sep 17 00:00:00 2001
From: Kirill Ageychenko <iGroza@users.noreply.github.com>
Date: Thu, 14 Mar 2024 21:27:34 +0700
Subject: [PATCH] fix: input autofocus (#1786)

* fix: input autofocus

* fix: input autofocus

* fix: islm tap

---------

Co-authored-by: iGroza <xneonxneon1@gmail.com>
Co-authored-by: Ragozin Nikita <nikita.ragozin@haqq.network>
---
 e2e/3_routine.test.ts            |  8 ++++++
 src/components/ui/text-field.tsx | 45 ++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/e2e/3_routine.test.ts b/e2e/3_routine.test.ts
index 11f7ae823..77046bbed 100644
--- a/e2e/3_routine.test.ts
+++ b/e2e/3_routine.test.ts
@@ -65,6 +65,14 @@ describe('Routine', () => {
       }
     }
     await element(by.id('ISLM')).tap();
+    const islmStillVisible = await isVisible('ISLM');
+    if (islmStillVisible) {
+      try {
+        await element(by.id('ISLM')).tap();
+      } catch (err) {
+        //
+      }
+    }
 
     const input_form = element(by.id('transaction_sum_form_input'));
     await waitFor(input_form).toBeFocused();
diff --git a/src/components/ui/text-field.tsx b/src/components/ui/text-field.tsx
index e81d98820..eb1b4546d 100644
--- a/src/components/ui/text-field.tsx
+++ b/src/components/ui/text-field.tsx
@@ -1,7 +1,15 @@
-import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 
-import {useFocusEffect} from '@react-navigation/native';
 import {
+  InteractionManager,
+  Keyboard,
   LayoutChangeEvent,
   NativeSyntheticEvent,
   Pressable,
@@ -24,6 +32,7 @@ import {Spacer} from '@app/components/ui/spacer';
 import {Text, TextProps} from '@app/components/ui/text';
 import {createTheme} from '@app/helpers';
 import {I18N} from '@app/i18n';
+import {sleep} from '@app/utils';
 import {IS_IOS} from '@app/variables/common';
 
 type Props = Omit<TextInputProps, 'placeholder'> & {
@@ -118,22 +127,26 @@ export const TextField: React.FC<Props> = memo(
       });
     }, [value, focusAnim, isFocused]);
 
-    useFocusEffect(
-      useCallback(() => {
-        let timer: NodeJS.Timeout | null = null;
-        if (autoFocus) {
-          timer = setTimeout(() => {
-            inputRef.current?.focus();
-          }, 100);
+    useLayoutEffect(() => {
+      if (!autoFocus) {
+        return;
+      }
+
+      const interaction = InteractionManager.runAfterInteractions(async () => {
+        if (!inputRef.current?.isFocused()) {
+          Keyboard.dismiss();
+          await sleep(100);
+          inputRef.current?.focus();
         }
+      });
 
-        return () => {
-          if (timer) {
-            clearTimeout(timer);
-          }
-        };
-      }, [autoFocus]),
-    );
+      return () => {
+        interaction.cancel();
+        if (inputRef.current?.isFocused()) {
+          inputRef.current?.blur();
+        }
+      };
+    }, [autoFocus]);
 
     let color = getColor(error ? Color.textRed1 : Color.textBase2);