[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
This commit is contained in:
Nicolas Gallagher
2021-06-08 15:58:16 -07:00
parent 3fc7634819
commit 697479e2cd
3 changed files with 12 additions and 5 deletions
@@ -14,6 +14,13 @@ export default function TextInputPage() {
return ( return (
<Example title="TextInput"> <Example title="TextInput">
<View style={styles.container}> <View style={styles.container}>
<TextInput
autoFocus
onFocus={() => {
console.log('focused');
}}
style={styles.textinput}
/>
<TextInput <TextInput
blurOnSubmit={true} blurOnSubmit={true}
onSubmitEditing={() => focusNextField()} onSubmitEditing={() => focusNextField()}
@@ -95,7 +95,7 @@ describe('components/TextInput', () => {
}); });
test('value "true"', () => { test('value "true"', () => {
const { container } = render(<input autoFocus />); const { container } = render(<TextInput autoFocus />);
const input = findInput(container); const input = findInput(container);
expect(document.activeElement).toBe(input); expect(document.activeElement).toBe(input);
}); });
+4 -4
View File
@@ -229,12 +229,12 @@ const TextInput: React.AbstractComponent<
function handleFocus(e) { function handleFocus(e) {
const node = hostRef.current; const node = hostRef.current;
if (onFocus) {
e.nativeEvent.text = e.target.value;
onFocus(e);
}
if (node != null) { if (node != null) {
TextInputState._currentlyFocusedNode = node; TextInputState._currentlyFocusedNode = node;
if (onFocus) {
e.nativeEvent.text = e.target.value;
onFocus(e);
}
if (clearTextOnFocus) { if (clearTextOnFocus) {
node.value = ''; node.value = '';
} }