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

[iOS][TextInput] onSelectionChange is not called in single line mode #21515

Closed
liamse opened this issue Oct 5, 2018 · 9 comments
Closed

[iOS][TextInput] onSelectionChange is not called in single line mode #21515

liamse opened this issue Oct 5, 2018 · 9 comments
Labels
Bug Component: TextInput Related to the TextInput component. Priority: Low Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@liamse
Copy link

liamse commented Oct 5, 2018

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-2435M CPU @ 2.40GHz
Memory: 101.08 MB / 10.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.1 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Xcode: 9.4/9F1027a - /usr/bin/xcodebuild
npmPackages:
@types/react: ^16.4.14 => 16.4.14
@types/react-native: ^0.57.0 => 0.57.0
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1

Description

onSelectionChange method of TextInput does not return proper value when you use TextInput in single mode (not set multiline = {true}).

Reproducible Demo

// App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, TextInput} from 'react-native';

type Props = {};
export default class App extends Component<Props> {

  constructor(props) {
    super(props)
    this.state = {
      selection: {start: 0, end: 0},
      text: 'This is a sample text',
    }
  }
  render() {
    return (
        <View style={styles.container}>
          <Text>{this.state.selection.start}, {this.state.selection.end}</Text>
          <TextInput
            style={{ width: 300, borderColor: 'gray', borderWidth: 1 }}
            onSelectionChange={({ nativeEvent: { selection } }) => {
              this.setState({ selection })
            }}
            onChangeText={(text) => this.setState({ text })}
            value={this.state.text}
          />
        </View>
    );
  }
}

Run the code, if you select the part of text in TextInput, you need to see the number of start and end of selection, but you don't see anything unless you start to type, or cut the selected part, if the text is change the selection numbers appear.

After select the part of text, the result is like following image:
screen shot 2018-10-05 at 6 22 26 pm

But if you add multiline = {true} it works properly.
screen shot 2018-10-05 at 6 25 37 pm

@liamse liamse changed the title onSelectionChange does not work properly in TextInput single line mode [v0.57] onSelectionChange does not work properly in TextInput single line mode Oct 5, 2018
@react-native-bot react-native-bot added Component: TextInput Related to the TextInput component. 🔶Components labels Oct 5, 2018
@react-native-bot
Copy link
Collaborator

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

@stale
Copy link

stale bot commented Jan 4, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 4, 2019
@LordParsley
Copy link

I have also experienced this issue on RN 0.57.3.

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 7, 2019
@proof666
Copy link

I have also experienced this issue on RN 0.57.5

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 350.36 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.2.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 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27
Build Tools: 23.0.1, 23.0.3, 25.0.3, 26.0.1, 26.0.2, 27.0.3, 28.0.2
System Images: android-27 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.5 => 0.57.5
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

@alloy
Copy link
Contributor

alloy commented Mar 19, 2019

Can confirm this is still an issue issue on 0.59.1.

@elicwhite elicwhite changed the title [v0.57] onSelectionChange does not work properly in TextInput single line mode [TextInput] onSelectionChange is not called in single line mode Mar 19, 2019
@elicwhite elicwhite changed the title [TextInput] onSelectionChange is not called in single line mode [iOS][TextInput] onSelectionChange is not called in single line mode Mar 19, 2019
@liamse
Copy link
Author

liamse commented Mar 21, 2019

Dear @alloy, unfortunately I can confirm this is still an issue.
I run exactly same code with following react-native environment info and the onSelectionChange is not called in single line mode but it properly works in multiline mode.

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-2435M CPU @ 2.40GHz
Memory: 624.06 MB / 10.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.1 - /usr/local/bin/node
Yarn: 1.5.1 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
IDEs:
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.1 => 0.59.1
npmGlobalPackages:
react-native-cli: 2.0.1
react-native: 0.52.0

@zhongwuzw
Copy link
Contributor

Fixing in #24840.

@stale
Copy link

stale bot commented Aug 13, 2019

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 13, 2019
@zhongwuzw
Copy link
Contributor

Fixed in c38f167.

@facebook facebook locked as resolved and limited conversation to collaborators Aug 13, 2019
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. Priority: Low Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

7 participants