TextInput: text selection is not working properly

[mallky]

Description

In an application, if we have Text that is replaced by an TextInput when a button is tapped, and when the button is tapped, the focus is on the input with text selection, then the text selection is not visible for a long strings. For short strings everything works fine.

Version

0.67.2

Output of npx react-native info

System:
OS: macOS 12.3.1
CPU: (8) x64 Apple M1
Memory: 56.32 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 6.14.14 - ~/.nvm/versions/node/v14.17.4/bin/npm
Watchman: 2022.02.14.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /Users/perfectart/.rvm/gems/ruby-2.7.4/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 30, 31
Build Tools: 29.0.2, 30.0.2, 31.0.0
System Images: android-31 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7935034
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Environment: iOS

1. Press Button
2. Change Text component to TextInput and focus on it programmatically
3. Selection is not visible for long strings

Snack, code example, screenshot, or link to a repository

Code example:

const App = () => {
  const textInput1 = useRef<TextInput>(null);
  const textInput2 = useRef<TextInput>(null);

  const [editMode1, setEditMode1] = useState(false);
  const [editMode2, setEditMode2] = useState(false);

  const handlePress1 = () => {
    setEditMode1(true);
    requestAnimationFrame(() => textInput1.current?.focus());
  };

  const handlePress2 = () => {
    setEditMode2(true);
    requestAnimationFrame(() => textInput2.current?.focus());
  };

  return (
    <SafeAreaView style={[{height, width}]}>
      <Text>focusinput1</Text>
      <View style={{borderWidth: 3, borderColor: 'red'}}>
        {!editMode1 && <Text>https://sr.wikipedia.org/wiki</Text>}
        {editMode1 && (
          <TextInput
            ref={textInput1}
            defaultValue="https://sr.wikipedia.org/wiki/%D0%8F%D0%BE%D0%BD_%D0%BE%D0%B4_%D0%93%D0%B5%D0%BD%D1%82%D0%B0https://sr.wikipedia.org/wiki/%D0%8F%D0%BE%D0%BD_%D0%BE%D0%B4_%D0%93%D0%B5%D0%BD%D1%82%D0%B0"
            autoCapitalize="none"
            autoCorrect={false}
            onBlur={() => setEditMode1(false)}
            selectTextOnFocus
          />
        )}
      </View>
      <Button title="Focus textinput1" onPress={handlePress1} />

      <Text>focusinput2</Text>
      <View style={{borderWidth: 3, borderColor: 'red'}}>
        {!editMode2 && <Text>https://sr.wikipedia.org</Text>}
        {editMode2 && (
          <TextInput
            ref={textInput2}
						defaultValue="https://sr.wikipedia.org/wiki"
            autoCapitalize="none"
            autoCorrect={false}
            onBlur={() => setEditMode2(false)}
            selectTextOnFocus
          />
        )}
      </View>
      <Button title="Focus textinput2" onPress={handlePress2} />
    </SafeAreaView>
  );
};

Video:
https://user-images.githubusercontent.com/22524446/168973047-b82e0b14-ae74-4143-8473-75823dab834b.mov

[rnike]

Seems like selectTextOnFocus is not working properly on the first focus call when the value is larger than the screen width.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.