Fix broken autofocus functionality.

jameswilddev · May 28, 2024 · 8bed520 · 8bed520
1 parent 0b69cda
commit 8bed520
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 65 deletions.
diff --git a/react-native/components/createInputComponent/index.tsx b/react-native/components/createInputComponent/index.tsx
@@ -426,7 +426,6 @@ export function createInputComponent<TValue, TContext> (
 
     const valid = tryParse(editing.current, context) !== undefined
 
-    const ref = React.useRef<null | TextInput>(null)
     const firstLayout = React.useRef(true)
 
     if (!autoFocus) {
@@ -451,17 +450,19 @@ export function createInputComponent<TValue, TContext> (
       >
         {leftIcon}
         <TextInput
-          {...(autoFocus
-            ? {
-                ref,
-                onLayout () {
-                  if (firstLayout.current) {
-                    firstLayout.current = false
-                    ref.current?.focus()
-                  }
+          ref={(element) => {
+            if (element !== null) {
+              if (autoFocus) {
+                if (firstLayout.current) {
+                  console.error('a')
+                  element.focus()
+                  firstLayout.current = false
                 }
+              } else {
+                firstLayout.current = true
               }
-            : {})}
+            }
+          }}
           style={
             disabled
               ? valid

diff --git a/react-native/components/createInputComponent/unit.tsx b/react-native/components/createInputComponent/unit.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text, TextInput, View } from 'react-native'
+import { TextInput, View, Text } from 'react-native'
 import * as TestRenderer from 'react-test-renderer'
 import {
   createInputComponent,
@@ -8891,7 +8891,6 @@ test('does nothing when auto-focus is enabled', () => {
             nodeType: 'component',
             type: TextInput,
             props: {
-              onLayout: expect.any(Function),
               style: {
                 flexGrow: 1,
                 color: '#FFEE00',
@@ -9022,29 +9021,22 @@ test('focuses the text input on layout when the ref is ready', () => {
   const onSubmit = jest.fn()
 
   const renderer = TestRenderer.create(
-    <Component
-      value={6}
-      onChange={onChange}
-      onSubmit={onSubmit}
-      secureTextEntry={false}
-      disabled={false}
-      autoFocus={true}
-      placeholder="Test Placeholder"
-      leftIcon={null}
-      rightIcon={null}
-      context={{
-        regex: /[^G]/,
-        character: 'G'
-      }}
-    />
-  );
-
-  (
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .rendered as TestRenderer.ReactTestRendererTree
-    ).rendered as readonly TestRenderer.ReactTestRendererTree[]
-  )[0]?.props['onLayout']()
+      <Component
+        value={6}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        secureTextEntry={false}
+        disabled={false}
+        autoFocus={true}
+        placeholder="Test Placeholder"
+        leftIcon={null}
+        rightIcon={null}
+        context={{
+          regex: /[^G]/,
+          character: 'G'
+        }}
+      />
+  )
 
   expect(
     (
@@ -9170,21 +9162,25 @@ test('does not focus the text input a second time', () => {
         character: 'G'
       }}
     />
-  );
-
-  (
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .rendered as TestRenderer.ReactTestRendererTree
-    ).rendered as readonly TestRenderer.ReactTestRendererTree[]
-  )[0]?.props['onLayout']();
+  )
 
-  (
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .rendered as TestRenderer.ReactTestRendererTree
-    ).rendered as readonly TestRenderer.ReactTestRendererTree[]
-  )[0]?.props['onLayout']()
+  renderer.update(
+    <Component
+      value={6}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      secureTextEntry={false}
+      disabled={false}
+      autoFocus={true}
+      placeholder="Test Placeholder"
+      leftIcon={null}
+      rightIcon={null}
+      context={{
+        regex: /[^G]/,
+        character: 'G'
+      }}
+    />
+  )
 
   expect(
     (
@@ -9985,14 +9981,7 @@ test('handles a change from auto focus to non-auto focus to auto focus', () => {
         character: 'G'
       }}
     />
-  );
-
-  (
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .rendered as TestRenderer.ReactTestRendererTree
-    ).rendered as readonly TestRenderer.ReactTestRendererTree[]
-  )[0]?.props['onLayout']()
+  )
 
   renderer.update(
     <Component
@@ -10028,14 +10017,7 @@ test('handles a change from auto focus to non-auto focus to auto focus', () => {
       character: 'G'
     }}
   />
-  );
-
-  (
-    (
-      (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
-        .rendered as TestRenderer.ReactTestRendererTree
-    ).rendered as readonly TestRenderer.ReactTestRendererTree[]
-  )[0]?.props['onLayout']()
+  )
 
   expect(
     (