TextInput cursor jump to right end when the input is empty (Android only)

[shermam]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

TextInput that has the placeholder set, and styles with textAlign: "center" and manages the value with useState hook, makes the cursor jump to the end of the input field when we clear the contents with backspace.

import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";

export default function App() {
  const [state, setState] = useState("");

  return (
    <View>
      <Text>Open up App.tsx to start working on your app!</Text>
      <TextInput
        style={styles.input}
        placeholder="My placeholder"
        value={state}
        onChangeText={setState}
      ></TextInput>
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    marginTop: 50,
    backgroundColor: "yellow",
    textAlign: "center",
    width: "100%",
  },
});

Related StackOverflow question: https://stackoverflow.com/questions/60276121/textinput-cursor-jump-to-right-end-when-the-input-is-empty

React Native version:

Run react-native info in your terminal and copy the results here.

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 39.64 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.14.1 - ~/.nvm/versions/node/v8.11.4/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play
Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_241 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: ~16.9.0 => 16.9.0
react-native: ~0.62 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create an empty RN project
2. Add the TextInput with the styles in the code above to the App.tsx file
3. Run the app on a Android device
4. Click the text input (Cursor should be at the center)
5. Type some text (Cursor should still be placed correctly)
6. Hit backspace to clear the input (Now when the input is completely cleared the cursor jumps all the way to the right)

Some times, when listening to changes in dev mode to update the app, the faulty behaviour is not noticed at first. When that happens, I comment out the placeholder prop and save for the app on my android emulator to refresh. Then I uncomment it again, and save to refresh one more time. With this I am able to reproduce the problem 100% of the time.

Expected Results

When the style textAlign: "center" is set, the cursor should stay in the center after you clear the input.

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

Please select the Android platform on snack to see the problem
https://snack.expo.io/QuGin01cF

[Andrew-J-Larson]

This might also relate to #28936, and how it affects only some devices

[fabOnReact]

Adding/Removing the placeholder triggers the problem. Tested on latest master

[Andrew-J-Larson]

What about how it affects webview's? For me, users are having issues with a react native scripted website through the webview. @fabriziobertoglio1987

[shermam]

@fabriziobertoglio1987 thanks for taking a look at this!

[fabOnReact]

possible solution inside ReactTextInputManager. Need to do extensive testing.

@ReactProp(name = "placeholder")
  public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
    String text = placeholder == null ? "" : placeholder;
    view.setHint(text);
  }

the problems seems to be connected to the use of the Stringish type for the placeholder field, which allows placeholder to default to null instead of empty string.

react-native/Libraries/Components/TextInput/TextInput.js

Line 605 in 5cde6c5

placeholder?: ?Stringish,

react-native/flow/Stringish.js

Line 14 in 5cde6c5

declare type Stringish = string;

Probably value of null causes problems when placeholder value is removed and measure is triggered to re-compute the content size..

The issue is caused by the useage of Maybe Types like ? which allow to pass null as value.

Seems like the one above is the easiest solution to implement as there are other logic built on top of this placeholder prop that could use the value of null... additionally change in the type would break old applications .. which may pass placeholder={null}

[fabOnReact]

#28733

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[shermam]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

I believe it still requires attention. @fabriziobertoglio1987 has this PR that seems to fix the problem. It as a small 2 liner, but for some reason it was not merged yet. So if anyone could take a look at that it would be super cool.

[nathantqn]

I'm facing the same issue and it's quite annoying, please help to verify and merge @fabriziobertoglio1987 's PR :(

[AndriiChubariev]

facing the same issue, my phone model is Realme 6 pro

[nathantqn]

Hi @fabriziobertoglio1987, if I wanna try your solution, all I need to do is change the logic in the /node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java right?

But after I add the changes

    String text = placeholder == null ? "" : placeholder;
    view.setHint(text);

And run npx react-native run-android, the issue isn't resolved, could you please help me to clarify this

[Haris-Shahid]

@nenjamin2405 bro did you find a Solution
upper solution is not working for me too

[Villar74]

still actual

[Great-hijack]

What is the solution for this issue?

[coucoseth]

facing the same problem. any solution?

[humaidk2]

Not sure why, but, setting multiline={true} fixed it for me

• based on the advise from here

https://stackoverflow.com/questions/60276121/textinput-cursor-jump-to-right-end-when-the-input-is-empty

[ahauzq]

I also have this problem. TextInput cursor jump to right end when the input is empty with borderColor/borderWidth or backgroundColor set on parent View. but every thing is ok without placeholder.

1."react-native": "0.63.0"
2.mobile phone model: vivo x50 or vivo x50 pro

const Demo: React.FC<any> = () => {
  const [value, setValue] = useState<string>()
  return (
    <SafeAreaView>
      <View style={{ backgroundColor: 'red' }}>
        <TextInput
          value={value}
          placeholder="placeholder"
          textAlign="center"
          onChangeText={v => {
            setValue(v)
          }}
        ></TextInput>
      </View>
    </SafeAreaView>
  )
}

[AntoineHabert]

This issue is still a thing.
In my case, first focus of the empty TextInput behaves correctly.
The issue triggers when the user empties the text input. Placeholder then appears and cursor jumps to the right.

[almeidaalajoel]

Also having this issue. Same as Antoine said, it works before adding text, then if text is added and removed, it jumps to the right.

[afzalali27]

Not sure why, but, setting multiline={true} fixed it for me

• based on the advise from here

https://stackoverflow.com/questions/60276121/textinput-cursor-jump-to-right-end-when-the-input-is-empty

This worked for me