react-native: [Android] Using TextInput inside ViewPagerAndroid causes context menu (copy/paste) in some cases to not display

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
      CPU: x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
      Memory: 284.57 MB / 15.54 GB
      Shell: 4.4.19 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.9.4 - /usr/bin/yarn
      npm: 6.3.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.0, 27.0.1, 27.0.3
        API Levels: 23, 24, 25, 26, 27
    npmPackages:
      @storybook/react-native: ^4.0.0-alpha.16 => 4.0.0-alpha.16
      react: ^16.4.2 => 16.4.2
      react-native: ^0.56.0 => 0.56.0

Description

Place a TextInput in ViewPagerAndroid
Attempt to select text from TextInput
Android logcat will display: “TextView does not support text selection. Selection cancelled.”

The following steps will not always reproduce the bug but in some configurations it can cause the effect. One of the apps I’m working on always has this bug however I am yet to find the exact reason why (perhaps due to a heavier component mount tree or subsequent component updates).

Another observation is that this is most prevalent if the device orientation is locked. When rotating to landscape and back to portrait, it seems to regain function. This may be due to View.onMeasure(int, int) and following View.onAttachedToWindow() being called on Native Android.

Another observation is that resuming the app after being in the background for a while will cause this issue.

This has not been working for at least the last couple of RN versions. It does not work on 0.57.0-rc.3 either. Here’s someone experiencing the same issue in 2016: link.

Reproducible Demo

https://snack.expo.io/SJurHkrvm

Note: Perform a small change in the snack and let the app hot reload. Text selection ability should be lost.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 16 (4 by maintainers)

Commits related to this issue

[Android/EditText]: Workaround for losing text selection ability In some instances setting style properties such as height to an EditText inside a ViewPager will not allow the user to select text. A... — committed to jamsch/react-native by jamsch 6 years ago

Most upvoted comments

Here’s also a current hacky workaround tested for the current RN version without having to change native code.

class InputField extends React.Component<Props, State> {

  static defaultProps = {
    editable: true,
  }
  
  constructor(props) {
    super(props);
    this.state = {
      editable: !props.editable
    };
  }

  componentDidMount() {
    if (this.props.editable) {
      setTimeout(() => {
        this.setState({ editable: true });
      }, 100);
    }
  }

  render() {
    const { editable } = this.state;
    return <TextInput {...this.props} editable={editable} />;
  }
}

+29

jamsch on Aug 28, 2018

Still an issue in 0.59.3

+22

shortcarver on Apr 3, 2019

@cpojer Could you please re-open this?

+10

WouterFlorijn on Dec 9, 2019

@cpojer can you please reopen this issue? This issue still appears in 0.59.9.

EDIT: this seems very similar to another, older bug from version 0.32.1 #9958

timgws on Sep 16, 2019

@jamsch why close this bug！！！

youngjuning on Aug 27, 2019

Here’s a small example. Notice that text selection isn’t possible on the first TextInput after a hot reload.

peek 2018-08-31 11-22

jamsch on Aug 31, 2018