Select text inside TextInput only once from onLayout

[j-piasecki]

Summary:

The behavior used for selectTextOnFocus changed in #45004. The new behavior relies on the field being set as a prop to keep track whether the text should be focused in onLayout or not. This causes a problem when autofocus is not used - when the layout of the text input changes, the text will get selected even if the focus doesn't change.

This also presents itself when the prop is set multiple times. I don't think this can happen in bare React Native, but third-party libraries (such as Reanimated) can cause this path to run:

react-native/packages/react-native/ReactCommon/react/renderer/core/ShadowNode.cpp

Lines 56 to 63 in d424bb9

	if (!hasBeenMounted && sourceNodeHasRawProps && props) {
	auto& castedProps = const_cast<Props&>(*props);
	castedProps.rawProps = mergeDynamicProps(
	sourceShadowNode.getProps()->rawProps,
	props->rawProps,
	NullValueStrategy::Override);
	return props;
	}

by cloning the node before it's committed. This behavior (cloning in Reanimated) is not ideal and a replacement is in the works, but in the meantime, it's causing a similar problem where the text will be selected on every layout change.

Changelog:

[ANDROID] [FIXED] - Fixed text being selected multiple times when selectTextOnFocus is used on a TextInput

Test Plan:

Code used in the videos

import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, TextInput, View} from 'react-native';

export default function A() {
    const [state, setState] = useState('Hello');
    const [visible, setVisible] = useState(false);
    const input = useRef(null);

    return (
        <SafeAreaView style={{flex: 1, backgroundColor: 'white', paddingTop: 100}}>
            <View style={{flexDirection: 'row'}}>
              <TextInput
                  ref={input}
                  accessibilityLabel="Text input field"
                  value={state}
                  underlineColorAndroid={'red'}
                  onChangeText={(a) => {
                      setState(a);
                  }}
                  selectTextOnFocus
                  style={{flex: 1}}
              />
              {visible && <View style={{width: 50, height: 50, backgroundColor: 'red'}} />}
            </View>
            <Button onPress={() => input.current.focus()} title="Focus" />
            <Button onPress={() => setVisible(!visible)} title="Toggle view" />
        </SafeAreaView>
    );
}

The behavior from the videos doesn't require Reanimated to be reproducible.

Before	Before - autofocus
Screen.Recording.2024-11-22.at.10.33.43.mov	Screen.Recording.2024-11-22.at.10.33.22.mov

After	After - autofocus
Screen.Recording.2024-11-22.at.10.15.33.mov	Screen.Recording.2024-11-22.at.10.18.29.mov

[facebook-github-bot]

@dmytrorykun has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[NickGerleman]

Are there other cases in Reanimated where props are reapplied multiple times? There are other places where that will cause problems, e.g. for ScrollView setting the contentOffset prop.

[j-piasecki]

It's not strictly Reanimated reapplying props - it's this part of the code:

react-native/packages/react-native/ReactCommon/react/renderer/core/ShadowNode.cpp

Lines 56 to 62 in d86412d

	if (!hasBeenMounted && sourceNodeHasRawProps && props) {
	auto& castedProps = const_cast<Props&>(*props);
	castedProps.rawProps = mergeDynamicProps(
	sourceShadowNode.getProps()->rawProps,
	props->rawProps,
	NullValueStrategy::Override);
	return props;

which relies on the previous node being mounted to apply only the props diff. This assumption is broken by Reanimated at the moment, but it's going to be fixed in the future. I think wrong behavior here was caused by the same field being used to store a prop and the view state at the same time.

[NickGerleman]

Why do we avoid the onLayout focus here?

[j-piasecki]

The original PR added this behavior to fix autofocus and selectTextOnFocus not working when used together. Since the focus logic was added to onLayout it may trigger in different cases also, you can see that in the first video (Before in the table), where the input is focused from JS (with no layout) and then layout change causes the text to be selected even though the focus didn't change.