"Jumping" KeyboardAvoidingView content on iOS in case of Passwords autosuggest button is present at the top of the keyboard

[SergeyYuhimovich]

Description:

"Jumping" KeyboardAvoidingView content on iOS in case of appearing of Passwords autosuggest button at the top of the keyboard.

React Native version:

System:
OS: macOS Mojave 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 363.24 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 28, 29
Build Tools: 28.0.3, 29.0.0, 29.0.1, 29.0.2
System Images: android-28 | Android TV Intel x86 Atom, android-28 | China version of Wear OS Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0 
react-native: 0.61.5 => 0.61.5 
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native: 0.61.5

Steps To Reproduce:

1. Run code on iOS device with enabled password autosuggest function.
2. KeyboardAvoidingView must have behavior='padding' and must be aligned to the bottom of the screen
3. Screen must contain 2+ TextInput fields one of which must have textContentType='password' or/and secureTextEntry={true}
4. Change focus by tapping from one field to another.

Expected Results:

KeyboardAvoidingView content don't move while changing focus on the TextInput fields.

Snack:

https://snack.expo.io/@sergeyyuhimovich/keyboardavoidingview-bug

[NIyerAD]

I've been having this problem as well but on iOS. I managed to get around it by setting secureTextEntry prop to true only when the password input is focused. I did the same with the textContentType, setting it to 'password' when the secureTextEntry prop is true, otherwise set it to 'none'. It doesn't seem like the best solution but it does work. Hope this helps

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Bardiamist]

keyboardWillShow triggers twice when secureTextEntry is true.

[RigoOnRails]

@stale I swear

[cosivox]

Any updates on this?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Bardiamist]

keyboardWillShow still triggers twice when secureTextEntry is true.

[sreuter]

I'm running into the same issue when switching between inputs which both have textContentType set to something other than none, e.g. telephoneNumber and emailAddress.

[dentep]

any solution to this?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[omerts]

Why was this closed?

[cortinico]

If this is still a problem please create a new issue against the latest stable version of RN

[jeremyblalock]

Absolutely still an issue, happens with vertically centered form, inside <KeyboardAvoidingView> with a password field.

[louislab]

Problem still persist after 4 years, interesting.

[jaworskimatt]

I ended up using Animated.View with variable marginTop based on the keyboard state and screen height. Not the most elegant but works if the content that needs moving is relatively small.

[VasylMartyniv]

The issue is still happening