Skip to content

KeyboardToolbar's button click will suddenly open the BottomSheet and immediately focus on the BottomSheetTextInput inside the BottomSheet #470

@7dp

Description

@7dp

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:

  1. Focus the keyboard on the last TextInput inside KAS.
  2. Click next button of KeyboardToolbar.
  3. BottomSheet will suddenly appear with a focused BottomSheetTextInput.

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

Metadata

Metadata

Assignees

Labels

KeyboardToolbarAnything related to KeyboardToolbar componentenhancementNew feature or requestrepro providedIssue contains reproduction repository/code

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions