-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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
Add support for Paste, Copy, Cut events in TextInput #18926
Comments
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
1 similar comment
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
I'm having the same problem. My users are complaining about not being able to use their password managers to paste passwords into I have found that the pasting limitation seems to be a Rich Text vs. Plain Text scenario. These steps will result in a failed paste:
While I've found that these steps will result in a successful paste
Hopefully this can be address in an upcoming release. Environment: Packages: (wanted => installed) |
Hi, I'm also impacted by this. Getting a lot of negative App Store reviews by customers unable to use LastPass and OnePassword with our app. |
I'm hitting this issue as well. This is a pretty popular method of entering passwords, would love RN support. |
I am having the same problem as well. It it very frustrated |
Also having this issue |
Customers reporting the same issue. |
Copy/Paste/Select in TextInputs works, but seems to be broken when the TextInput is in a particular UI: #9958 |
Seems like Paste functionality works on android, and iPhone 8. In particular, doesnt seem to be working on iPhone X for myself. Haven't tested extensively across multiple devices. |
Handoff issue? Finding that having Handoff activated on iPhone/iPad disallows paste within react-native TextInput. We've shown that disabling Handoff on iOS devices then allows paste to work. (On iOS > Settings > General > Handoff.) |
I tested this again disabling Handoff on iPhone X (iOS 12 beta) and the problem still exists. |
@harryhiggins . Thanks for testing that out! I forgot to mention that sometimes it requires a restart of the iPhone/iPad for it to work as well. It's very flaky, sometimes it works, sometimes not. We've also found that turning off App Refresh and restarting phone will allow it to work as well. Here are a couple of articles which speak to both these issues: https://www.osxiosexpert.com/universal-clipboard-not-working-here-is-how-to-fix-it/ Hard to know what may be going on here. Is it a react-native issue or iOS (both)? |
have any some update? |
Encountered this issue as well. We use expo, so react-native version is slightly out of date:
Seems to happen when a For us what fixed it (removed noise, only the relevant changes): import React, { Component } from 'react';
import { TextInput as NativeTextInput } from 'react-native';
class TextInput extends Component {
state = {
inputWidth: '99%'
}
componentDidMount() {
setTimeout(() => this.setState({ inputWidth: 'auto' }), 100);
}
render() {
const { inputWidth } = this.state;
return <NativeTextInput style={{ width: inputWidth }} />
}
} |
hmmm appreciate the idea @larstadema however when i create my own TextInput component using your code and use it instead of the RN one i get this error "Warning: Can't call setState (or forceUpdate) on an unmounted component." Back to the drawing board. |
I'm back from the drawing board :) componentDidMount() { componentWillUnmount() { |
and for fun i'll share my render. I'm using lodash for its cloneDeep method. Its probably an expensive render method but it gets the job done passing in all props from the component above it. render() { |
better yet make the width change on demand, i intercept and pass along the onFocus event which is less taxing than a setTimeout (especially since i load a bunch of them in a list eg, list of posts with comment boxes) ...
|
What's the latest minimal reproduction for this? From a quick read, it looks like TextInput does support copy/paste. There's two problems reported so far in this thread: Handoff may be affecting paste functionality, and using TextInput inside a KeyboardAvoidingView might also interfere. If we can change this issue from a "feature request" (i.e. add support for copy/paste functionality) to a "bug report" (i.e. the functionality already exists, but it fails in X or Y scenario), it might improve its chances of getting fixed. |
I solved this by adding the property "removeClippedSubviews={false}" to my ScrollView and encapsulating the content inside a KeyboardAvoidingView. <ScrollView
contentContainerStyle={Styles.contentContainerStyle}
keyboardShouldPersistTaps="handled"
removeClippedSubviews={false}
>
<KeyboardAvoidingView>
<Text style={Styles.labelPageTitle}>
{'bla bla bla'}
</Text>
<Text>
{'bla bla bla'}
</Text>
<TextInput
onChangeText={text => this.setState({ title: text })}
style={Styles.textInput}
value={title}
/>
</KeyboardAvoidingView>
</ScrollView> |
@hramos I have been able to reproduce this into a simple example, as per below. Copy paste will break on android if a parent view has removeClippedSubviews enabled, and the textInput is wrapped in a view with certain styles. See below. function Input() {
return (
<View
// This breaks copy/paste on android with certain styles
removeClippedSubviews={true}
style={{
flex: 1,
justifyContent: "center",
padding: 40,
backgroundColor: "gray"
}}
>
<View style={{ elevation: 1 }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View style={{ borderWidth: 1 }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View style={{ backgroundColor: "white" }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View>
<TextInput placeholder="Can Copy/Paste" style={{ backgroundColor: "white" }} />
</View>
<TextInput placeholder="Can Copy/Paste" style={{ backgroundColor: "white" }} />
</View>
);
} I think more people will have this issue as I believe createBottomTabNavigator from react-navigation uses removeClippedSubviews for performance improvements. I can replicate the same issue by removing the removeClippedSubviews prop from the parent view, but then wrapping it in the createBottomTabNavigator, as per below. function Input() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
padding: 40,
backgroundColor: "gray"
}}
>
<View style={{ elevation: 1 }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View style={{ borderWidth: 1 }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View style={{ backgroundColor: "white" }}>
<TextInput placeholder="broken copy/paste" style={{ backgroundColor: "white" }} />
</View>
<View>
<TextInput placeholder="Can Copy/Paste" style={{ backgroundColor: "white" }} />
</View>
<TextInput placeholder="Can Copy/Paste" style={{ backgroundColor: "white" }} />
</View>
);
}
const Navigator = createBottomTabNavigator({
Input
});
const Navigation = createAppContainer(Navigator);
export default Navigation; |
Something weird is happening to me. When I click for the first time in an empty input, it doesn't show the paste option. Once I write something in the input and delete it the paste option shows correctly. I don't know why I can not paste in an empty input. I've tried not using scroll, use |
I was using createMaterialBottomNavigator from react-navigator which caused this issue for me. I spent to whole night trying to fix this. The problem is the removeClippedSubviews is set as true. After setting it to false the clipboard appeared. I solved this by setting it to false in five files. Path to files:
--
|
I've encountered a similar problem, where adding Code: import * as React from 'react';
import { Text, View, StyleSheet, TextInput, KeyboardAvoidingView } from 'react-native';
import Constants from 'expo-constants';
function Input() {
return (
<KeyboardAvoidingView>
<Text selectable>To replicate - copy this text</Text>
<View
// removeClippedSubviews breaks copy/paste on android
removeClippedSubviews={true}
style={{
backgroundColor: "lightgray"
}}
>
<Text>Broken Inputs </Text>
<View style={{ elevation: 1 }} removeClippedSubviews={false}>
<TextInput
placeholder="broken copy/paste"
style={{ backgroundColor: "white" }}
/>
</View>
<View style={{ borderWidth: 1 }}>
<TextInput
placeholder="broken copy/paste"
style={{ backgroundColor: "white" }}
/>
</View>
<View style={{ backgroundColor: "white" }}>
<TextInput
placeholder="broken copy/paste"
style={{ backgroundColor: "white" }}
/>
</View>
<TextInput
placeholder="broken copy/paste"
style={{ backgroundColor: "lightblue" }}
/>
</View>
<View>
<Text>Working Inputs </Text>
<View>
<TextInput
placeholder="Can Copy/Paste"
style={{ backgroundColor: "white" }}
/>
</View>
<View style={{ backgroundColor: "lightblue" }}>
<TextInput placeholder="Can Copy/Paste" />
</View>
<TextInput
placeholder="Can Copy/Paste"
style={{ backgroundColor: "white" }}
/>
</View>
</KeyboardAvoidingView>
);
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Input />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
backgroundColor: 'lightgrey',
padding: 8,
},
}); |
This Simple Hack Saves me. Basicly just put width dynamicly, do some delay and update state for its width to 100% |
I have a different scenario. Paste option works just fine for iOS, but has weird issue on Android: My TextInput is enclosed in a View. If I try to directly paste something there, it does not show paste option. But if I type atleast one letter and remove it and then try to paste something, it works. |
Thank you @AzizStark your answer is what worked for me. Nothing else I tried worked because react-navigation kept on overriding everything else I tried. I'm using |
I am glad, It helped! |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions. |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information. |
TextInput
does not support Paste, Copy, Cut events, but it should.Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 8.10.0
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.3 Build version 9E145
Android Studio: Not Found
Packages: (wanted => installed)
react: ^16.0.0 => 16.2.0
react-native: ^0.53.3 => 0.53.3
Steps to Reproduce
Not applicable.
Expected Behavior
Not applicable.
Actual Behavior
Not applicable.
The text was updated successfully, but these errors were encountered: