-
- Notifications
You must be signed in to change notification settings - Fork 131
Description
Hi 🙌. Thank you so much for your hard work on this amazing lib.
Truly useful for the community. ❤️
Describe the bug
So i have a screen in my RN app. The screen has a several TextInput inside a KeyboardAwareScrollView (KAS is from this lib). And i have a BottomSheet (from Gorhom) that has a BottomSheetTextInput inside it. Lastly, i have a KeyboardToolbar.
The problem begin when i focused to the last TextInput inside KAS and then i click the next button of KeyboardToolbar and then suddenly my BottomSheet (that i haven't opened yet before) is appear with the BottomSheetTextInput is focused.
Code snippet
function App(): React.JSX.Element { const sheetRef = useRef<RNBottomSheet>(null); return ( <GestureHandlerRootView style={styles.flex}> <KeyboardProvider> <SafeAreaView style={[styles.background, styles.flex]}> <KeyboardAwareScrollView contentContainerStyle={styles.kasContentContainer} keyboardShouldPersistTaps="handled" bottomOffset={keyboardBottomOffset}> {Array(10) .fill('') .map((_item, index) => ( <TextInput key={index} placeholderTextColor="lightgray" placeholder="Type here..." style={styles.input} /> ))} <Button title="Open Sheet" onPress={() => { sheetRef.current?.expand(); }} /> </KeyboardAwareScrollView> <KeyboardToolbar /> <BottomSheet ref={sheetRef}> <View style={styles.container}> <BottomSheetTextInput placeholderTextColor="lightgray" placeholder="Type here..." style={styles.input} /> </View> </BottomSheet> </SafeAreaView> </KeyboardProvider> </GestureHandlerRootView> ); }Repo for reproducing
https://github.com/7dp/KeyboardToolbarBottomSheetRepro
To Reproduce
Steps to reproduce the behavior:
- Focus the keyboard on the last
TextInputinside KAS. - Click next button of
KeyboardToolbar. BottomSheetwill suddenly appear with a focusedBottomSheetTextInput.
Expected behavior
KeyboardToolbar next/prev click should not focus to the BottomSheetTextInput inside the BottomSheet, so the BottomSheet will not appear at all.
Screenshots
Record:
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/49138064/fda545a1-3ba3-4594-9400-d033b0e1c4d4
Smartphone (please complete the following information):
- Desktop OS: MacOS 12.7.5
- Device: (Android) Oppo A53
- OS: Android 12
- RN version: 0.73.8
- RN architecture: Old/Paper
- JS engine: Hermes
- Library version: ^1.12.2