-
Notifications
You must be signed in to change notification settings - Fork 24.5k
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 accepts formatted text on paste, shows formatting in the TextInput but gives plain text from callback #31442
Comments
As a temporary solution for clean up formatting from pasted text, I use
|
I'm also facing this issue; any progress on this? |
This issue occurs due to some invisible characters like This code resolved the issue of copied images for me <TextInput |
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### What is the root cause of that problem? Android EditText and iOS UITextField/UITextView have different copy/paste behavior. - Android TextInput copies/pastes rich text - iOS UITextField copies/pastes plain text. | iOS (react-native) | Android (react-native) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#31442: 1) The JavaScript TextInput and ReactEditText Android state are not in sync 2) The TextInput Android Native state over-rides the JavaScript state. 3) onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles). More info at Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 Test Plan: #### Reproducing the issue on Android https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4 #### Fixing the issue on Android Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4 #### Testing the solution on React Native https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### What is the root cause of that problem? Android EditText and iOS UITextField/UITextView have different copy/paste behavior. - Android TextInput copies/pastes rich text - iOS UITextField copies/pastes plain text. | iOS (react-native) | Android (react-native) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#31442: 1) The JavaScript TextInput and ReactEditText Android state are not in sync 2) The TextInput Android Native state over-rides the JavaScript state. 3) onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles). More info at Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 Test Plan: #### Reproducing the issue on Android https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4 #### Fixing the issue on Android Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4 #### Testing the solution on React Native https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### What is the root cause of that problem? Android EditText and iOS UITextField/UITextView have different copy/paste behavior. - Android TextInput copies/pastes rich text - iOS UITextField copies/pastes plain text. | iOS (react-native) | Android (react-native) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#31442: 1) The JavaScript TextInput and ReactEditText Android state are not in sync 2) The TextInput Android Native state over-rides the JavaScript state. 3) onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles). More info at Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 Test Plan: #### Reproducing the issue on Android https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4 #### Fixing the issue on Android Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4 #### Testing the solution on React Native https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### What is the root cause of that problem? Android EditText and iOS UITextField/UITextView have different copy/paste behavior. - Android TextInput copies/pastes rich text - iOS UITextField copies/pastes plain text. | iOS (react-native) | Android (react-native) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native #31442: 1) The JavaScript TextInput and ReactEditText Android state are not in sync 2) The TextInput Android Native state over-rides the JavaScript state. 3) onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles). More info at Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes #31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: #38189 Test Plan: #### Reproducing the issue on Android https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4 #### Fixing the issue on Android Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4 #### Testing the solution on React Native https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
…acebook#38189) Summary: Text is copy pasted as rich text on Android TextInput instead of Plain Text. ### What is the root cause of that problem? Android EditText and iOS UITextField/UITextView have different copy/paste behavior. - Android TextInput copies/pastes rich text - iOS UITextField copies/pastes plain text. | iOS (react-native) | Android (react-native) | | ----------- | ----------- | | <video src="https://user-images.githubusercontent.com/24992535/249170968-8fde35f0-a53c-4c5c-bd89-ee822c08eadf.mp4" width="350" /> | <video src="https://user-images.githubusercontent.com/24992535/249171968-bf0915a0-4060-4586-b267-7c2b463d76f6.mov" width="350" /> | ### What changes do you think we should make in order to solve the problem? The issue is a bug in react-native facebook#31442: 1) The JavaScript TextInput and ReactEditText Android state are not in sync 2) The TextInput Android Native state over-rides the JavaScript state. 3) onChangeText passes a plain text string to JavaScript, not rich text (text with spans and styles). More info at Expensify/App#21411 (comment) The solution consists of: 1) **Over-riding onTextContextMenuItem in ReactEditText to copy/paste plain text instead of rich-text** (https://stackoverflow.com/a/45319485/7295772). 2) **Removing the `Paste as plaintext` option from the insert and selection context menu** fixes facebook#31442 ## Changelog: [ANDROID] [FIXED] - Remove option to paste rich text from Android EditText context menu Pull Request resolved: facebook#38189 Test Plan: #### Reproducing the issue on Android https://user-images.githubusercontent.com/24992535/249185416-76f8a687-1aca-4dc9-9abe-3d73d6e2893c.mp4 #### Fixing the issue on Android Sourcecode https://github.com/fabriziobertoglio1987/text-input-cursor-flickering-android/blob/fix-copy-paste/app/src/main/java/com/example/myapplication/CustomEditText.java https://user-images.githubusercontent.com/24992535/249486339-95449bb9-71b6-430c-8207-f5672f034fa9.mp4 #### Testing the solution on React Native https://github.com/Expensify/App/assets/24992535/b302237b-99e5-44a2-996d-8bc50bbbc95c Reviewed By: mdvacca Differential Revision: D47824730 Pulled By: NickGerleman fbshipit-source-id: 35525e7d52e664b0f78649d23941262ee45a00cd
Description
TextInput accepting rich(formatted) text on paste. all colors, fontSize, spacings are maintained and showing up in TextInput but
onTextChange
not giving any information about formatting, it just giving out plain texts.React Native version:
Binaries:
Node: 14.15.4 - ~/node/bin/node
Yarn: 1.22.10 - ~/node/bin/yarn
npm: 7.9.0 - ~/node/bin/npm
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 27, 28, 29
Build Tools: 28.0.3, 29.0.1, 29.0.2
System Images: android-23 | Intel x86 Atom_64, android-27 | Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: javac 9-internal - /usr/bin/javac
Python: 3.8.5 - /home/war/anaconda3/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
onTextChange
Expected Results
TextInput should show the same plain text that we are getting from
onChangeText
, oronChangeText
should give us information about formatting with Pasted text.screenshot :
message
contains the plain text I am getting fromonChangeText
The text was updated successfully, but these errors were encountered: