[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

Author: necolas

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()}

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);
     });

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 = '';
       }