mhoran
commented
4 years ago I was able to work around this issue by creating a custom component as shown below, but it would great to see a proper fix for this.
import * as React from 'react';
import { TextInput } from 'react-native';
type Props = React.ComponentProps<typeof TextInput>;
const UndoTextInput: React.FC<Props> = ({ value, onChangeText, ...rest }) => {
const lastValue = React.useRef<string>();
const textInput = React.useRef<TextInput>(null);
const handleChangeText = (textValue: string) => {
lastValue.current = textValue;
onChangeText && onChangeText(textValue);
};
React.useEffect(() => {
if (value !== lastValue.current) {
lastValue.current = value;
textInput.current?.setNativeProps({ text: value });
}
}, [value]);
return (
<TextInput {...rest} ref={textInput} onChangeText={handleChangeText} />
);
};
export default UndoTextInput;
cristianoccazinsp
stale[bot]
MrAlexWeber
github-actions[bot]
gedu
react-native-bot
Please provide all the information requested. Issues that do not follow this format are likely to stall.
Description
Setting
value, ordefaultValuewithonChangewill cause iOS undo/redo keyboard feature (mostly on iPads) to break or rarely work. Additionally, it may cause a native crash from time to time.Basically, the undo button gets enabled for half a second, and then gets disabled again. The issue will not happen if
valueordefaultValueis not set. I suspect this is related to the code that sends the JS value to native which in turn clears/updates the native input.React Native version:
Run
react-native infoin your terminal and copy the results here.Steps To Reproduce
<TextInput value={this.state.value}>somewhere.Expected Results
Either undo/redo should not be possible, or it should behave just as if a native input was used (do not clear the stack after each component update)
Snack, code example, screenshot, or link to a repository:
The issue can be observed even with the sample code from the docs:
Additionally, the following crash will happen from time to time, presumably from this poor undo/redo handling of the component, or even Apple's source code.
Sample video: