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

[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

[7dp]

Sorry for the blurry video, hope the problem still be visible.

[kirillzyusko]

Hey @7dp

Yeah, this is currently a limitation of KeyboardToolbar - it detects all inputs on the screen.

F full solution would be exporting component like KeyboardToolbar.Exclude and wrap TextInputs which you wouldn't like to be detectable, or KeyboardToolbar.SequentialForm to show a region in which TextInputs should be scanned.

Right now I see two potential solutions:

• use BottomSheetModal instead of BottomSheet - in this case TextInput shouldn't exist in hierarchy unless Modal is actually visible.
• you can try to override a behavior of KeyboardToolbar:
  • you'll need to add onFocus/onBlur to last TextInput and modify a state based on the event (isLastInputFocused);
  • for KeyboardToolbar you'll need to override Button component (https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-toolbar#button) - it has disabled property that you'll need to modify and use like disabled || isLastInputFocused. Though it may be hard to achieve, because I'm not exporting Button and Icon components 🙈

Anyway, let me know if any of these workaround is actually fixes the problem for you or not 👀

[7dp]

Thanks for the suggested workarounds, Kirill. For now i'll just disable the KeyboardToolbar component.

[kirillzyusko]

Thanks for the suggested workarounds, Kirill.

As an option 😁

I'll keep the issue open - when I have more spare cycles I'll get back to this issue and will create a proper solution 👍