[Android] Using TextInput with 'selection' prop causes context menu (copy/paste) to not display #33697
Description
Description
When you have a TextInput with selection property and try to long press on text, it is selected, but no context menu is displayed. When you long press on it the second time, it is displayed.
I've tried to debug in via Android Studio and sometimes this error appeared in console: W/TextView: TextView does not support text selection. Selection cancelled..
That led me to discovering this issue and this issue on Google's bugtracker. The recommended fix was to toggle setEnabled property inside the onAttachedToWindow method of EditText. So I did that inside of the ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java, inserted these two lines here:
super.setEnabled(false);
super.setEnabled(true);That didn't resolve the issue.
I've also tried workarounds such as toggling editable property afret the first render (and after timeout), but that also didn't help.
Maybe someone has some suggestions/ideas of what can be done on JS side or on native side? Rebuilding react-native from source is a hassle, so if you have some ideas of what might work - please share them, I'll try them out myself.
Version
0.68.1
Output of npx react-native info
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Memory: 1.01 GB / 7.69 GB
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 18.0.0 - /usr/bin/node
Yarn: 1.22.18 - /usr/bin/yarn
npm: 8.6.0 - /usr/bin/npm
Watchman: 2022.03.21.00 - /home/linuxbrew/.linuxbrew/bin/watchman
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.1 => 0.68.1
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
- Have a
TextInputwith selection property - Long press on text inside the
TextInputto select it - Verify that copy/paste menu is not displayed
Snack, code example, screenshot, or link to a repository
https://snack.expo.dev/V34Cbc4DW
const App = () => {
const [selection, setSelection] = useState(null);
const [text, setText] = useState('');
return (
<TextInput
selection={selection}
onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
value={text}
onChangeText={(text) => setText(text)}
style={{ alignSelf: 'center', width: 200, marginTop: 50, backgroundColor: 'grey' }}
/>
);
};