From 697479e2cdcd89a2e7f93d72f2c5abf5c5e15293 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Tue, 8 Jun 2021 15:58:16 -0700
Subject: [PATCH] [fix] TextInput calls onFocus if autoFocus={true}

The host node ref is not a dependency of the focus handling. Previously, the
focus callback was not called if the element was auto-focused, because  React
DOM calls `onFocus` while the object ref is `null`.

Fix #2045
---
 packages/examples/pages/text-input/index.js               | 7 +++++++
 .../src/exports/TextInput/__tests__/index-test.js         | 2 +-
 packages/react-native-web/src/exports/TextInput/index.js  | 8 ++++----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/examples/pages/text-input/index.js b/packages/examples/pages/text-input/index.js
index 48da3d3b..54f93abe 100644
--- a/packages/examples/pages/text-input/index.js
+++ b/packages/examples/pages/text-input/index.js
@@ -14,6 +14,13 @@ export default function TextInputPage() {
   return (
     <Example title="TextInput">
       <View style={styles.container}>
+        <TextInput
+          autoFocus
+          onFocus={() => {
+            console.log('focused');
+          }}
+          style={styles.textinput}
+        />
         <TextInput
           blurOnSubmit={true}
           onSubmitEditing={() => focusNextField()}
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 19357b54..5a798667 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -95,7 +95,7 @@ describe('components/TextInput', () => {
     });
 
     test('value "true"', () => {
-      const { container } = render(<input autoFocus />);
+      const { container } = render(<TextInput autoFocus />);
       const input = findInput(container);
       expect(document.activeElement).toBe(input);
     });
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index ef3cb270..965dc45a 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -229,12 +229,12 @@ const TextInput: React.AbstractComponent<
 
   function handleFocus(e) {
     const node = hostRef.current;
+    if (onFocus) {
+      e.nativeEvent.text = e.target.value;
+      onFocus(e);
+    }
     if (node != null) {
       TextInputState._currentlyFocusedNode = node;
-      if (onFocus) {
-        e.nativeEvent.text = e.target.value;
-        onFocus(e);
-      }
       if (clearTextOnFocus) {
         node.value = '';
       }