Skip to content

Commit 3560753

Browse files
fabOnReactfacebook-github-bot
authored andcommitted
Fix TextInput Cursor jumping to the right when the placeholder null (#28995)
Summary: This issue fixes #28794 fixes #27658 Flow type ?Stringish allows to set the placeholder value to null. The null value causes the cursor to jump to the right in a TextInput. The fix replaces the placeholder null value with an empty string which avoid calling setHint(null) as causes the placeholder to jump to the right. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - avoid calling setHint with a null parameter causing cursor to jump to the right Pull Request resolved: #28995 Test Plan: **<details><summary>CLICK TO OPEN TESTS RESULTS (28 May 2020 20a9473)</summary>** <p> More videos and information included in issue #28794 The below test cases are from the [following repository](https://github.com/fabriziobertoglio1987/AwesomeProject) | **BEFORE** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/83123470-3e2f8000-a0d5-11ea-8718-11e6a0575a0c.gif" />| | **AFTER** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/83123554-599a8b00-a0d5-11ea-9701-6557f0d76044.gif" />| Extensive testing on `RNTester` did not identify any regression. | **AFTER** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/83123586-628b5c80-a0d5-11ea-92eb-449d499dcc7d.gif" />| </p> </details> **<details><summary>CLICK TO OPEN TESTS RESULTS (15 February 2021 https://github.com/facebook/react-native/pull/28995/commits/20a9473aaa330ad9b6e7a0b42ebd9c4ed41ce60b)</summary>** <p> | **BEFORE** | |:-------------------------:| | <video src="https://user-images.githubusercontent.com/24992535/107960803-5d44a980-6fa5-11eb-90e2-f0d665e35291.mp4" />| | **AFTER** | |:-------------------------:| | <video src="https://user-images.githubusercontent.com/24992535/107960602-1f478580-6fa5-11eb-8f39-b985fafa6a6c.mp4" />| </p> </details> Reviewed By: charlesbdudley Differential Revision: D30095877 Pulled By: lunaleaps fbshipit-source-id: 38a3e788443a22d48a4335063cd4315638bd8e97
1 parent f1b4748 commit 3560753

File tree

3 files changed

+4
-3
lines changed

3 files changed

+4
-3
lines changed

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import type {
2323
ViewStyleProp,
2424
ColorValue,
2525
} from '../../StyleSheet/StyleSheet';
26-
import requireNativeComponent from '../../ReactNative/requireNativeComponent';
2726
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
2827
import type {TextInputNativeCommands} from './TextInputNativeCommands';
2928
import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
@@ -415,7 +414,7 @@ export type NativeProps = $ReadOnly<{|
415414
/**
416415
* The string that will be rendered before text input has been entered.
417416
*/
418-
placeholder?: ?string,
417+
placeholder?: ?Stringish,
419418

420419
/**
421420
* The text color of the placeholder string.

Libraries/Components/TextInput/TextInput.js

+2
Original file line numberDiff line numberDiff line change
@@ -1163,6 +1163,7 @@ function InternalTextInput(props: Props): React.Node {
11631163
} else if (Platform.OS === 'android') {
11641164
const style = [props.style];
11651165
const autoCapitalize = props.autoCapitalize || 'sentences';
1166+
const placeholder = props.placeholder ?? '';
11661167
let children = props.children;
11671168
const childCount = React.Children.count(children);
11681169
invariant(
@@ -1205,6 +1206,7 @@ function InternalTextInput(props: Props): React.Node {
12051206
* to get fixed */
12061207
onScroll={_onScroll}
12071208
onSelectionChange={_onSelectionChange}
1209+
placeholder={placeholder}
12081210
selection={selection}
12091211
style={style}
12101212
text={text}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -459,7 +459,7 @@ public void setAllowFontScaling(ReactEditText view, boolean allowFontScaling) {
459459
}
460460

461461
@ReactProp(name = "placeholder")
462-
public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
462+
public void setPlaceholder(ReactEditText view, String placeholder) {
463463
view.setHint(placeholder);
464464
}
465465

0 commit comments

Comments
 (0)