Keyboard hides input after autofill on Android

[antonandreyev]

Describe the bug When using autofill on Android with Google password manager inside KeyboardAwareScrollView, keyboard behaves like this:

• pops up, input scrolls above keyboard (correct)
• autofill prompt: keyboard hides, text input does not loose the focus, saved credentials selection appears as a bottom sheet
• click on any saved cred, it gets filled into the text field (no onFocus or onBlur fires)
• password manager bottom sheet hides, keyboard appears again
• this time keyboard covers input field as scrollview does not react to keayboard second appearance
• [optional]: on any input keyboard avoidance restores

Code snippet

export const App = sentryWrap(() => {
  return (
    <Providers>
      <LoginOTPEmailScreen />
    </Providers>
  );
});

function LoginOTPEmailScreen() {
  const [value, setValue] = useState("");

  return (
    <KeyboardAwareScrollView keyboardShouldPersistTaps="handled">
      <View style={{ height: 600 }} />
      <TextInput
        accessibilityLabel="Text input field"
        style={{ borderWidth: 1 }}
        value={value}
        autoComplete="username"
        keyboardType="email-address"
        autoCorrect={false}
        autoCapitalize="none"
        onChangeText={setValue}
      />
    </KeyboardAwareScrollView>
  );
}

export const Providers = ({ children }) => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
        <KeyboardProvider statusBarTranslucent>{children}</KeyboardProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
};

Repo for reproducing N/A, full code provided in the snippet.

To Reproduce See the video and follow steps in description

Expected behavior On the second keyboard appearance keyboard avoidance works

Screenshots

https://github.com/user-attachments/assets/ccbf2599-4f4e-4800-aad9-0d3f320398bd

Smartphone (please complete the following information):

• Desktop OS: Windows 11
• Device: Samsung A41 and any other android
• OS: Android 13
• RN version: 0.75
• RN architecture: old
• JS engine: Hermes
• Library version: 1.14.2

Additional context "react-native-gesture-handler": "^2.20.2", "react-native-reanimated": "~3.15.5", "react-native-safe-area-context": "^4.12.0",

[kirillzyusko]

@antonandreyev thank you for the issue! I'm able to reproduce it 🎉

I opened a PR with a potential fix - https://github.com/kirillzyusko/react-native-keyboard-controller/pull/667

May I ask you to test it and let me know how it works for you?

[antonandreyev]

Yes, I can confirm it helped! But also I can note little regression in the actual app: Status bar loses (or gains) color when password manager is visible (it returns back once manager is hidden). Context:

• react-navigation 6
• react-native-screens 3.35.0
• statusBarColor: "transparent" in screen options of native stack navigator
• statusBarTranslucent is true

I will try to find time tomorrow to create a reproduction repo

[kirillzyusko]

I will try to find time tomorrow to create a reproduction repo

Thank you, because StatusBar doesn't change a color in my example app 🙂

Feel free to open a new issue then 🙌 (I'll merge a PR and this issue will be automatically closed)