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

TextInput accepts formatted text on paste, shows formatting in the TextInput but gives plain text from callback #31442

Closed
vaibhavs2 opened this issue Apr 27, 2021 · 3 comments

Comments

@vaibhavs2
Copy link

vaibhavs2 commented Apr 27, 2021

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

  1. Use Android OS
  2. Use TextInput in components
  3. Copy rich(formatted) text from any webpage in you mobile browser
  4. Paste that copied rich text in the TextInput
  5. looks at the text you got from onTextChange
  6. Don't do like copy rich text from browser on Desktop and paste that in emulator, it will not reproduce.
  7. Copy from Mobile's bowser and paste in the same mobile's new react-native App's TextInput

Expected Results

TextInput should show the same plain text that we are getting from onChangeText, or onChangeText should give us information about formatting with Pasted text.

screenshot :

message contains the plain text I am getting from onChangeText

state

@vlesu
Copy link

vlesu commented Dec 15, 2021

As a temporary solution for clean up formatting from pasted text, I use

<TextInput value={this.state.myText}
    onChangeText={(newText) => {
      if (Math.abs(this.state.myText.length - newText.length)<=1) { // type in
        this.setState({myText: newText});
      } else { // paste
        this.setState({myText: ' '+newText}, ()=>{
            this.setState({myText: newText});
        });
      }
    }}
/>

@betoharres
Copy link

I'm also facing this issue; any progress on this?

@Rishabh20051997
Copy link

Rishabh20051997 commented Sep 18, 2022

This issue occurs due to some invisible characters like https://www.compart.com/en/unicode/U+FFFC also getting copied.

This code resolved the issue of copied images for me

<TextInput
....
onChangeText={(content) => {
let finalResult = content.replace(//g, '')
this.setState({
descriptionValue: finalResult
})
}}
/>

billnbell pushed a commit to billnbell/react-native that referenced this issue Jul 29, 2023
…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
billnbell pushed a commit to billnbell/react-native that referenced this issue Jul 29, 2023
…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
billnbell pushed a commit to billnbell/react-native that referenced this issue Jul 29, 2023
…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
lunaleaps pushed a commit that referenced this issue Aug 7, 2023
…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
Kudo pushed a commit to expo/react-native that referenced this issue Aug 21, 2023
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants