fix: input autofocus (#1786)

* fix: input autofocus * fix: input autofocus * fix: islm tap --------- Co-authored-by: iGroza <[email protected]> Co-authored-by: Ragozin Nikita <[email protected]>
haqq-network · Mar 14, 2024 · 001f6b2 · 001f6b2
1 parent 1da2fdb
commit 001f6b2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git 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
@@ -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);