Skip to content

Commit

Permalink
Fix TextInput Cursor jumping to the right when the placeholder null (#…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Aug 12, 2021
1 parent f1b4748 commit 3560753
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import type {
ViewStyleProp,
ColorValue,
} from '../../StyleSheet/StyleSheet';
import requireNativeComponent from '../../ReactNative/requireNativeComponent';
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
import type {TextInputNativeCommands} from './TextInputNativeCommands';
import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
Expand Down Expand Up @@ -415,7 +414,7 @@ export type NativeProps = $ReadOnly<{|
/**
* The string that will be rendered before text input has been entered.
*/
placeholder?: ?string,
placeholder?: ?Stringish,

/**
* The text color of the placeholder string.
Expand Down
2 changes: 2 additions & 0 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -1163,6 +1163,7 @@ function InternalTextInput(props: Props): React.Node {
} else if (Platform.OS === 'android') {
const style = [props.style];
const autoCapitalize = props.autoCapitalize || 'sentences';
const placeholder = props.placeholder ?? '';
let children = props.children;
const childCount = React.Children.count(children);
invariant(
Expand Down Expand Up @@ -1205,6 +1206,7 @@ function InternalTextInput(props: Props): React.Node {
* to get fixed */
onScroll={_onScroll}
onSelectionChange={_onSelectionChange}
placeholder={placeholder}
selection={selection}
style={style}
text={text}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ public void setAllowFontScaling(ReactEditText view, boolean allowFontScaling) {
}

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

Expand Down

0 comments on commit 3560753

Please sign in to comment.