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

[jamsch]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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

1. Place a TextInput in ViewPagerAndroid
2. Attempt to select text from TextInput
3. 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.

[jamsch]

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} />;
  }
}

[jamsch]

Updated Snack with minimal repro. Just perform a small edit, let the app hot reload and attempt to select text from the first text box.

[jamsch]

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

[AlexandreMagniez]

I suffered from this issue too. In my case, a 2nd render is necessary to enable contextMenu on Android.
Thanks to @jamsch comment, I've been able to make it work.

[AlexeyVlasenko]

Hi, i have this issue too! Any updates or native workarounds?

Also, reproducable example: https://snack.expo.io/S1A0eJ30X

[jamsch]

Looks like 0.58.0-rc.1 seems to solve this issue. There's about a thousand commits between the previous release so I'm not sure exactly what had fixed it.

[stwiname]

This is still an issue in 0.59.2

[shortcarver]

Still an issue in 0.59.3

[jacquesdev]

Still an issue in 0.59.9, but at least the workaround does the job https://github.com/facebook/react-native/issues/20887#issuecomment-416775306

[jacquesdev]

@jamsch

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

Should this not always update the state to the prop? So something like this

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

[youngjuning]

@jamsch why close this bug！！！

[timgws]

@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

[vladbars]

still issue in RN 0.60.3

[JulianKingman]

If you're using react-native-screens, the issue could be as referenced here: https://github.com/kmagiera/react-native-screens/issues/40#issuecomment-548478565

[WouterFlorijn]

@cpojer Could you please re-open this?

[chumakoff]

Still an issue in RN 0.61.4
The #20887 workaround works when a TextInput is editable.
However, when a TextInput is not editable (editable={false}) the workaround doesn't help.

I used a 'hooks' version of the workaround:

const [editable, setEditable] = useState(false);

useEffect(() => {
    setEditable(true);
}, []);

<TextInput editable={editable} />