iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627

Closed
hamaron wants to merge 1 commit into
react:masterfrom
hamaron:fix_text_input_bug
Closed

iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom
hamaron:fix_text_input_bug

Conversation

@hamaron

@hamaronhamaron commented Mar 30, 2018

Copy link
Copy Markdown
Contributor

The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.

Test Plan

  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}

Related PRs

Release Notes

[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string

@facebook-github-botfacebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 30, 2018
@hamaronhamaron mentioned this pull request Mar 30, 2018
Closed
@react-native-botreact-native-bot added 📋Release Notes Platform: iOS iOS applications. Component: TextInput Related to the TextInput component. labels Mar 30, 2018
vshia pushed a commit to humandx/react-native that referenced this pull request Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb

otusweb commented Apr 3, 2018

Copy link
Copy Markdown

I tried this fix and it is working correctly in my project

@hamaronhamaron mentioned this pull request Apr 3, 2018
Closed
@wack17s

wack17s commented Apr 24, 2018

Copy link
Copy Markdown

can this be merged? pls

jpstrikesback added a commit to APIOpoly/react-native that referenced this pull request Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot

facebook-github-bot commented May 1, 2018

Copy link
Copy Markdown
Contributor

@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

@hamaron

hamaron commented May 1, 2018

Copy link
Copy Markdown
ContributorAuthor

@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?

@kayzenkayzen

kayzenkayzen commented May 3, 2018

Copy link
Copy Markdown

Please Merge!

@GStipick

GStipick commented May 3, 2018

Copy link
Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.

@code-jenn-or

code-jenn-or commented May 3, 2018

Copy link
Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app

@hamaron
hamaronforce-pushed the fix_text_input_bug branch from c5c0a55 to fd87ba2CompareMay 3, 2018 17:07
@hamaron

hamaron commented May 3, 2018•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

@facebook-github-bot Rebased the branch on the latest master branch.

@kayzenkayzen

kayzenkayzen commented May 9, 2018

Copy link
Copy Markdown

@hamaron please, fix checks!

@hamaron

hamaron commented May 10, 2018•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...

@kayzenkayzen

kayzenkayzen commented May 11, 2018

Copy link
Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?

@hamaron

hamaron commented May 11, 2018

Copy link
Copy Markdown
ContributorAuthor

@kayzenkayzen Thought you wanted me to fix the test failures in CI.
To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by
one of the core contributors in this repository to get this branch merged.

@hamaron

hamaron commented May 11, 2018

Copy link
Copy Markdown
ContributorAuthor

@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
Closed
Closed
@facebook-github-bot

facebook-github-bot commented Jun 3, 2018

Copy link
Copy Markdown
Contributor

@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

@AshoatAshoat mentioned this pull request Jun 8, 2018
Closed
@Ashoat

Ashoat commented Jun 9, 2018•
edited
Loading

Copy link
Copy Markdown
Contributor

@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?

@hamaron

hamaron commented Jun 11, 2018

Copy link
Copy Markdown
ContributorAuthor

@Ashoat OK. I'll rebase the branch shortly.

@atticoos

atticoos commented Jun 12, 2018•
edited
Loading

Copy link
Copy Markdown
Contributor

@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go

@hamaron
hamaronforce-pushed the fix_text_input_bug branch from fd87ba2 to e612d7cCompareJune 12, 2018 17:06
@hamaron

hamaron commented Jun 12, 2018

Copy link
Copy Markdown
ContributorAuthor

The branch was rebased and the tests became all green! :)

@elicwhite
elicwhite requested a review from sherginJune 12, 2018 20:55
@elicwhite

elicwhite commented Jun 12, 2018

Copy link
Copy Markdown
Contributor

Adding @shergin because it is a text related iOS change.

@Ashoat

Ashoat commented Jun 15, 2018

Copy link
Copy Markdown
Contributor

@facebook-github-bot shipit

@facebook-github-botfacebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Jun 15, 2018
facebook-github-bot
facebook-github-bot approved these changes Jun 15, 2018
View reviewed changes

@facebook-github-botfacebook-github-bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

hramos pushed a commit that referenced this pull request Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit to taptapsend/react-native that referenced this pull request Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit to expo/react-native that referenced this pull request Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit to discord/react-native-archived that referenced this pull request Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw mentioned this pull request Feb 15, 2019
Closed
aleclarson pushed a commit to aleclarson/react-native-macos that referenced this pull request Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit to aleclarson/react-native-macos that referenced this pull request Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit to aleclarson/react-native-macos that referenced this pull request Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit to ptmt/react-native-macos that referenced this pull request Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit to ptmt/react-native-macos that referenced this pull request Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit that referenced this pull request Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit that referenced this pull request Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar

mtettmar commented Jun 29, 2023

Copy link
Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.

enigmaticsoul216 added a commit to enigmaticsoul216/RN_macos that referenced this pull request Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin
2 more reviewers
@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string - #18627
Closed
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Closed
iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string#18627
hamaron wants to merge 1 commit into
react:masterfrom 
hamaron:fix_text_input_bug
Conversation
@hamaron
@hamaronhamaron
commented
Mar 30, 2018

Copy link


Copy Markdown

Contributor
The bug #18374 was caused by the loose condition to execute stringByReplacingCharactersInRange in the method textInputShouldChangeTextInRange . As a result, findMismatch wrongly returning true which ends up the Backspace event being fired in another textInputShouldChangeTextInRange call in textInputDidChange.
Test Plan
  1. Pass all the tests by yarn run test
  2. Run the following code and type any text. (This code is brought from [0.54] [iOS] Wrong 'Backspace' event fired onKeyPress after clearing TextInput #18374. Thank you @michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
    
and entering any letters.
typeProps={};typeState={text: string,keys: string};exportdefaultclassAppextendsComponent<Props,State>{state={text: '',keys: ''}render(){return(<Viewstyle={styles.container}><TextInputstyle={styles.textInput}value={this.state.text}onChangeText={this.onChangeText}onKeyPress={this.onKeyPress}/><Buttontitle="Clear"onPress={this.onClear}/><Text>Text: {this.state.text}</Text><Text>Keys: {this.state.keys}</Text></View>);}onChangeText=(text: string)=>{this.setState({text})}onKeyPress=({ nativeEvent }: Object)=>{this.setState({keys: this.state.keys+nativeEvent.key+', '})}onClear=()=>{this.setState({text: '',keys: ''})}}
Related PRs
Release Notes
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
@facebook-github-botfacebook-github-bot
added
the 
CLA Signed
This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
label
Mar 30, 2018
@hamaronhamaron
mentioned this pull request
Mar 30, 2018

Closed

@react-native-botreact-native-bot
added

📋Release Notes

Platform: iOS
iOS applications.
Component: TextInput
Related to the TextInput component.
labels
Mar 30, 2018
vshia pushed a commit
to humandx/react-native
that referenced
this pull request
Apr 2, 2018
@UrosZivaljevic
Fix backspace issue - origin PRreact#18627
442f97b
@otusweb
otusweb
commented
Apr 3, 2018

Copy link


Copy Markdown

I tried this fix and it is working correctly in my project
@hamaronhamaron
mentioned this pull request
Apr 3, 2018

Closed

@wack17s
wack17s
commented
Apr 24, 2018

Copy link


Copy Markdown

can this be merged? pls
jpstrikesback added a commit
to APIOpoly/react-native
that referenced
this pull request
Apr 26, 2018
@jpstrikesback
Tracking PRreact#18627
84d0ec2
@facebook-github-bot
facebook-github-bot
commented
May 1, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@hamaron
hamaron
commented
May 1, 2018

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Yes this is still relevant. Based on the blame info that I can see, the other reviewer should be @shergin. shergin, can you take a look at this PR?
@kayzenkayzen
kayzenkayzen
commented
May 3, 2018

Copy link


Copy Markdown

Please Merge!
@GStipick
GStipick
commented
May 3, 2018

Copy link


Copy Markdown

The fix proposed by @hamaron worked for me as well. The bug that this PR is addressing is vital toward some of our teams code and the ability to update react-native.
@code-jenn-or
code-jenn-or
commented
May 3, 2018

Copy link


Copy Markdown

This really needs to be addressed, creates very undesirable behavior in our app
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
c5c0a55 to
fd87ba2CompareMay 3, 2018 17:07
@hamaron
hamaron
commented
May 3, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@facebook-github-bot Rebased the branch on the latest master branch.
@kayzenkayzen
kayzenkayzen
commented
May 9, 2018

Copy link


Copy Markdown

@hamaron please, fix checks!
@hamaron
hamaron
commented
May 10, 2018•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Unfortunately, the tests had been broken when I rebased the branch on master, and the change I made is actually irrelevant to the test failures...
@kayzenkayzen
kayzenkayzen
commented
May 11, 2018

Copy link


Copy Markdown

@hamaron what does that mean? Is this pull request abandoned? if not, when it usually takes a fix to reach production? Do you know any hack for this issue?
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@kayzenkayzen Thought you wanted me to fix the test failures in CI.

To be clear, I'm not the one who can merge this PR. I need to get this PR reviewed by

one of the core contributors in this repository to get this branch merged.
@hamaron
hamaron
commented
May 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@shergin Sorry for bugging you, but it would be great if you could take a look at this bug fix.

This was referenced May 29, 2018
 Closed


Closed

@facebook-github-bot
facebook-github-bot
commented
Jun 3, 2018

Copy link


Copy Markdown

Contributor
@hamaron I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.
@AshoatAshoat
mentioned this pull request
Jun 8, 2018

Closed

@Ashoat
Ashoat
commented
Jun 9, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@hamaron: the CI is finally fixed and passing on master. Can you rebase this PR to see the latest CI results?
@hamaron
hamaron
commented
Jun 11, 2018

Copy link


Copy Markdown

ContributorAuthor
@Ashoat OK. I'll rebase the branch shortly.
@atticoos
atticoos
commented
Jun 12, 2018•

edited

Loading

Copy link


Copy Markdown

Contributor
@TheSavior we're having a tough time finding a core member to champion the review, would like to tag you in to assist. This should be ready to go
@hamaron
hamaronforce-pushed
the
fix_text_input_bug
branch
from
fd87ba2 to
e612d7cCompareJune 12, 2018 17:06
@hamaron
hamaron
commented
Jun 12, 2018

Copy link


Copy Markdown

ContributorAuthor
The branch was rebased and the tests became all green! :)
@elicwhite
elicwhite
requested a review
from sherginJune 12, 2018 20:55
@elicwhite
elicwhite
commented
Jun 12, 2018

Copy link


Copy Markdown

Contributor
Adding @shergin because it is a text related iOS change.
@Ashoat
Ashoat
commented
Jun 15, 2018

Copy link


Copy Markdown

Contributor
@facebook-github-bot shipit
@facebook-github-botfacebook-github-bot
added
the 
Import Started
This pull request has been imported. This does not imply the PR has been approved.
label
Jun 15, 2018
facebook-github-bot
facebook-github-bot
approved these changes
Jun 15, 2018
View reviewed changes
@facebook-github-botfacebook-github-bot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashoat is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
hramos pushed a commit
that referenced
this pull request
Jun 15, 2018
@hamaron@hramos
iOS: Fixed the bug where a Backspace event was emitted when entering …
3fc653e
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
sidnair pushed a commit
to taptapsend/react-native
that referenced
this pull request
Aug 2, 2018
@hamaron@sidnair
iOS: Fixed the bug where a Backspace event was emitted when entering …
e7430a4
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
ide pushed a commit
to expo/react-native
that referenced
this pull request
Aug 31, 2018
@hamaron@ide
iOS: Fixed the bug where a Backspace event was emitted when entering …
7ca6ea3
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Fanghao pushed a commit
to discord/react-native-archived
that referenced
this pull request
Sep 6, 2018
@hamaron@Fanghao
iOS: Fixed the bug where a Backspace event was emitted when entering …
bf39b3f
…characters after clearing a text in TextInput by an empty string (react#18627)
Summary:
The bug react#18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from react#18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closesreact#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
@zhongwuzwzhongwuzw
mentioned this pull request
Feb 15, 2019
 Closed

aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 23, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
35f9585
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
11977f2
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to aleclarson/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
198e4ce
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
5e5cea3
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
aleclarson pushed a commit
to ptmt/react-native-macos
that referenced
this pull request
Feb 27, 2019
@hamaron@aleclarson
iOS: Fixed the bug where a Backspace event was emitted when entering …
9f9cbc7
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
facebook-github-bot pushed a commit
that referenced
this pull request
Mar 12, 2019
@zhongwuzw@facebook-github-bot
Fix TextInput maxLength when insert characters at begin (#23472)
1741593
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
kelset pushed a commit
that referenced
this pull request
Mar 29, 2019
@zhongwuzw@kelset
Fix TextInput maxLength when insert characters at begin (#23472)
1a35bc5
Summary:
Fixes#21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4), #18627, but they don't solve it totally.
[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: #23472
Reviewed By: mmmulani
Differential Revision: D14366406
Pulled By: ejanzer
fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
@mtettmar
mtettmar
commented
Jun 29, 2023

Copy link


Copy Markdown

Not sure if it's the same bug but I'm seeing the same behaviour in RN 0.72.0 - whatever key is pressed Backspace is also emitted. After upgrading to RN 0.72.0 we were seeing strange behaviour which led me to search and find the report this fix is based on. Have had to use the same workaround with the timestamp.
enigmaticsoul216 added a commit
to enigmaticsoul216/RN_macos
that referenced
this pull request
Feb 2, 2025
@enigmaticsoul216
iOS: Fixed the bug where a Backspace event was emitted when entering …
06c7a77
…characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
Closesreact/react-native#18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@sherginsherginAwaiting requested review from shergin

2 more reviewers

@facebook-github-botfacebook-github-botfacebook-github-bot approved these changes
@iamrutvikiamrutvikiamrutvik approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Component: TextInputRelated to the TextInput component.Import StartedThis pull request has been imported. This does not imply the PR has been approved.Platform: iOSiOS applications.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

13 participants

@hamaron@otusweb@wack17s@facebook-github-bot@kayzenkayzen@GStipick@code-jenn-or@Ashoat@atticoos@elicwhite@mtettmar@iamrutvik@react-native-bot