stripe-react-native
stripe-react-native copied to clipboard
CardField followed by TextInput makes app crash on Android pressing enter
trafficstars
Describe the bug CardField makes app crash on Android when there is a TextInput on the same screen and user presses enter.
To Reproduce Steps to reproduce the behavior:
- Start app with CardField and TextInput
- Enter any number in CardField like 42
- Press enter on hardware or custom keyboard
- See error
Expected behavior The app not to crash
Code
import { CardField } from '@stripe/stripe-react-native';
import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
export interface RootProps {}
interface RootState {}
class Root extends Component<RootProps, RootState> {
render() {
return (
<View style={{ flex: 1, marginVertical: 100 }}>
<CardField
style={{
height: 56,
marginHorizontal: 0,
}}
/>
<TextInput placeholder="Nickname" />
</View>
);
}
}
export default Root;
Smartphone (please complete the following information):
- Device: Pixel 8
- OS: Android API 34
- Version stripe-react-native 0.41.0 && 0.42.0
- ReactNative: 0.76.1
Additional context Default on-screen keyboard does not have any enter button, but using a hardware keyboard or custom keyboard it has a enter button.
If I add the following code between CardField and TextInput, it does not crash:
<Pressable onPress={() => {}}><Text> </Text></Pressable>
This is the error I see in logcat:
Exception java.lang.IllegalStateException: focus search returned a view that wasn't able to take focus!
at android.widget.TextView.onKeyUp (TextView.java:9646)
at android.view.KeyEvent.dispatch (KeyEvent.java:2952)
at android.view.View.dispatchKeyEvent (View.java:15591)