Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput duplicate value when inserting at the beginning (ios) maxLength #21639

Closed
3 tasks done
MadeinFrance opened this issue Oct 10, 2018 · 2 comments
Closed
3 tasks done
Labels
Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@MadeinFrance
Copy link

MadeinFrance commented Oct 10, 2018

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native: 0.57.2

Description

[iOS only]

When entering 1 character at the beginning of the TextInput, we expect to have only 1 character inserted. However we experience that the character is inserted and the current value is duplicated.

This behaviour is reproducible when the prop maxLength is used and when length of the current value is above the half of the maxLength prop.

I have created an app from scratch using create-react-native-app, and I have modified App.js to include the following:

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { text: '10000' };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40, width:120, borderColor: 'gray', borderWidth: 1}}
          maxLength={10}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}/>
      </View>
    );
  }
}

Reproducible Demo

demo


Core investigation

  1. In RCTBaseTextInputView.m the ivar _predictedText is not updated correctly when inserting at the beginning.
@JumalDB
Copy link

JumalDB commented Nov 8, 2018

Have the same issue on 0.57.3.

@JumalDB
Copy link

JumalDB commented Nov 8, 2018

It seems that issue is solved in 0.57.4.

@hramos hramos removed the Bug Report label Feb 6, 2019
kelset pushed a commit that referenced this issue Mar 29, 2019
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
@facebook facebook locked as resolved and limited conversation to collaborators Mar 12, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 12, 2020
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants