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]

nit: please follow existing conventions

Suggested change

	private boolean hasSelectedTextOnFocus = false;
	private boolean mDidSelectTextOnFocus = false;

[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.

[NickGerleman]

Why do we avoid the onLayout focus here?