diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index ba1dccb26f5..654765e7c79 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -31,7 +31,7 @@ import type {PressEvent} from '../../Types/CoreEventTypes'; import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; import type {TextInputNativeCommands} from './TextInputNativeCommands'; -const {useEffect, useRef, useState} = React; +const {useLayoutEffect, useRef, useState} = React; type ReactRefSetter = {current: null | T, ...} | ((ref: null | T) => mixed); @@ -869,7 +869,7 @@ function InternalTextInput(props: Props): React.Node { // This is necessary in case native updates the text and JS decides // that the update should be ignored and we should stick with the value // that we have in JS. - useEffect(() => { + useLayoutEffect(() => { const nativeUpdate = {}; if (lastNativeText !== props.value && typeof props.value === 'string') { @@ -912,7 +912,7 @@ function InternalTextInput(props: Props): React.Node { viewCommands, ]); - useEffect(() => { + useLayoutEffect(() => { const inputRefValue = inputRef.current; if (inputRefValue != null) { @@ -920,19 +920,14 @@ function InternalTextInput(props: Props): React.Node { return () => { TextInputState.unregisterInput(inputRefValue); + + if (TextInputState.currentlyFocusedInput() === inputRefValue) { + nullthrows(inputRefValue).blur(); + } }; } }, [inputRef]); - useEffect(() => { - // When unmounting we need to blur the input - return () => { - if (isFocused()) { - nullthrows(inputRef.current).blur(); - } - }; - }, [inputRef]); - function clear(): void { if (inputRef.current != null) { viewCommands.setTextAndSelection(