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

[fabOnReact]

<TextInput 
      placeholder="myPlaceholderProp" />

The TextInput placeholder prop is set with the following method. Commenting setHint seems to remove the placeholder and the issue.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines 407 to 410 in 1a77943

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

Similar issues are experienced using the placeholder setHint with EditText android class. Probably the workaround used in react-native is similar to the one proposed in the stackoverflow answer (using setGravity(Gravity.CENTER)).

Over-riding measure

1. set the placeholder editText.setHint(getPlaceholder());
2. measure() and then call YogaMeasureOutput.make().
   The result is that measure() returns a different value.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java

Lines 103 to 135 in 1a77943

	@Override
	public long measure(
	YogaNode node,
	float width,
	YogaMeasureMode widthMode,
	float height,
	YogaMeasureMode heightMode) {
	// measure() should never be called before setThemedContext()
	EditText editText = Assertions.assertNotNull(mInternalEditText);
	if (mLocalData != null) {
	mLocalData.apply(editText);
	} else {
	editText.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextAttributes.getEffectiveFontSize());
	if (mNumberOfLines != UNSET) {
	editText.setLines(mNumberOfLines);
	}
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M
	&& editText.getBreakStrategy() != mTextBreakStrategy) {
	editText.setBreakStrategy(mTextBreakStrategy);
	}
	}
	// make sure the placeholder content is also being measured
	editText.setHint(getPlaceholder());
	editText.measure(
	MeasureUtil.getMeasureSpec(width, widthMode),
	MeasureUtil.getMeasureSpec(height, heightMode));
	return YogaMeasureOutput.make(editText.getMeasuredWidth(), editText.getMeasuredHeight());
	}

This has probably an effect on the layout but commenting the line editText.setHint does not remove the bug... so I believe the bug is connected to the layout function responsibile for setting textAlign: "center"

Maybe the issue is connected to using setGravity

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines 564 to 570 in 1a77943

	} else if ("left".equals(textAlign)) {
	view.setGravityHorizontal(Gravity.LEFT);
	} else if ("right".equals(textAlign)) {
	view.setGravityHorizontal(Gravity.RIGHT);
	} else if ("center".equals(textAlign)) {
	view.setGravityHorizontal(Gravity.CENTER_HORIZONTAL);
	} else {

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines 618 to 627 in 9263eb5

	/* package */ void setGravityHorizontal(int gravityHorizontal) {
	if (gravityHorizontal == 0) {
	gravityHorizontal = mDefaultGravityHorizontal;
	}
	setGravity(
	(getGravity()
	& ~Gravity.HORIZONTAL_GRAVITY_MASK
	& ~Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK)
	| gravityHorizontal);
	}

I commented all the textAlign and setHorizontalGravity logic, the problem would obviously not reproduce until I set in ReactEditText

    @Override
    public void afterTextChanged(Editable s) {
      if (!mIsSettingTextFromJS && mListeners != null) {
        for (TextWatcher listener : mListeners) {
          listener.afterTextChanged(s);
        }
      }
      setGravity(Gravity.CENTER);
    }

so the cause of this issue is using setGravity(Gravity.CENTER).

I'll keep testing the rest of the logic and hopefully I find the solution. Thanks

[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

[fabOnReact]

@TheAlienDrew if you can open an issue with reproducible example, I will work on it. If I have a solution, I ll write a pull request. Thanks

[shermam]

@fabriziobertoglio1987 thanks for taking a look at this!

[fabOnReact]

I found a possible solution, the issue is caused from calling the placeholder setter before calling the textAlign setter.

Adding to the below method

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines 848 to 855 in c8fed9e

	@Override
	public void afterTextChanged(Editable s) {
	if (!mIsSettingTextFromJS && mListeners != null) {
	for (TextWatcher listener : mListeners) {
	listener.afterTextChanged(s);
	}
	}
	}

setGravity(Gravity.CENTER_HORIZONTAL);
setHint("this hint does not break");

Does not cause the bug.

While if we set the text via the javascript setter prop placeholder

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines 407 to 410 in c8fed9e

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

setHint is called before my setGravity(Gravity.CENTER_HORIZONTAL) and it breaks

I already experienced this with other issues in react-native, so I believe that I can publish a pull request to fix this within end of this week.

Thanks a lot 😃

[fabOnReact]

It does not reproduce when I call setHint("my test hint") because there are 2 methods triggered from the <TextInput placeholder /> prop (using setHint and setGravity(Gravity.CENTER) manually skips the below logic):

1. ReactTextInputManager method setPlaceholder responsible to set the hint (or placeholder) text

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines 407 to 410 in fd97e95

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

2. ReactTextInputShadowNode method setPlaceholder responsible to trigger the re-calculation of measure using markUpdated().

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java

Lines 186 to 190 in fd97e95

	@ReactProp(name = PROP_PLACEHOLDER)
	public void setPlaceholder(@Nullable String placeholder) {
	mPlaceholder = placeholder;
	markUpdated();
	}

POINT 2 is required as the placeholder text is used to compute the dimensions in measure callback, by creating a dummy editText and then computing the dimensions.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java

Lines 128 to 135 in fd97e95

	// make sure the placeholder content is also being measured
	editText.setHint(getPlaceholder());
	editText.measure(
	MeasureUtil.getMeasureSpec(width, widthMode),
	MeasureUtil.getMeasureSpec(height, heightMode));
	return YogaMeasureOutput.make(editText.getMeasuredWidth(), editText.getMeasuredHeight());
	}

Additionally style: { textAligh: "center" } trigger the following method:

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

Lines 568 to 570 in 1a77943

	} else if ("center".equals(textAlign)) {
	view.setGravityHorizontal(Gravity.CENTER_HORIZONTAL);
	} else {

I believe setGravity will work only if measure compute the dimensions after the placeholder was calculated. Removing and Readding the placeholder will break the logic maybe by calling setGravity before measure...

related: https://stackoverflow.com/questions/38934776/cannot-resize-linear-layout-children-in-android-react-native-module

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