Keyboard space is not removed when interacting with password inputs (on iOS)

[depyronick]

Environment

Library version: 3.1.3
OS version: 14 Pro, iOS 16.2

Affected platforms

• Android
• iOS

Current behavior

If you focus on another input after scrolling while the keyboard is open, keyboard height space does not removed when the keyboard closed.

Expected behavior

Remove space.

[depyronick]

IMG_6532.MOV

[mateusz1913]

Hi @depyronick , thx for sending the recording! Unfortunately I am not able to start investigation, based only on the video.

Could you paste the snippet of code which consists how you use the library for your form?

[depyronick]

@mateusz1913

import {
  ScrollView
} from "react-native";

import { useCallback } from "react";

import { AvoidSoftInput } from "react-native-avoid-softinput";
import { useFocusEffect } from "@react-navigation/native";

const FUIKeyboardAwareScrollView = ({ children }) => {
  const onFocusEffect = useCallback(() => {
    AvoidSoftInput.setEnabled(true);
    AvoidSoftInput.setShouldMimicIOSBehavior(true);
    AvoidSoftInput.setEasing("linear");
    AvoidSoftInput.setHideAnimationDelay(0);
    AvoidSoftInput.setShowAnimationDelay(0);
    AvoidSoftInput.setAvoidOffset(0);

    return () => {
      AvoidSoftInput.setEnabled(false);
      AvoidSoftInput.setShouldMimicIOSBehavior(false);
    };
  }, []);

  useFocusEffect(onFocusEffect);

  return (
    <ScrollView>
      {children}
    </ScrollView>
  );
}

export {
  FUIKeyboardAwareScrollView
}

const RegisterScreen = () => {
  return (
    <FUIKeyboardAwareScrollView>
      <TextInput />
    </FUIKeyboardAwareScrollView>
  )
}

[depyronick]

The implementation is as simple as I provided. The problem occurs when you scroll AND focus on another input.

[mateusz1913]

Thx, are all text inputs under the same scrollview? Would you be able to provide minimal reproduction repo, so that I can run it locally and investigate?

[hirbod]

I can reproduce that applied space won't get removed once the Keyboard was closed with the return key.
The issue does not happen when I close the keyboard by scrolling or tapping the ScrollView (keyboardDismissMode="on-drag" and keyboardShouldPersistTaps="handled"

Here is a video demonstrating the issue.

spacing.mp4

[mateusz1913]

👋 @hirbod thanks for recording video. Could you provide a link to minimal reproducible repository? I'm not able to start investigating the issue just with video, where I don't have a context on whether you use AvoidSoftInput module or AvoidSoftInputView

[hirbod]

@mateusz1913 I understand, I am just a bit overloaded with work right now, I try to give you an MRE, but my explanation actually nailed the repro.

I am using

  useEffect(() => {
    AvoidSoftInput.setEnabled(true);
    AvoidSoftInput.setShowAnimationDelay(0);
    return () => {
      AvoidSoftInput.setEnabled(false);
    };
  }, []);

That's it. iOS 16, Video is from the simulator. Only reproducible when I hit the return key.
Hope this helps. If you can't reproduce this with my informations, I'll try to make an repro soon

[mateusz1913]

Hmmm, I see that on video, you submit the form with password input with autofill - is it reproducible on a form without iOS autofill?

[mateusz1913]

I'll start with testing password inputs, but if you manage to make a repro or at least test if incorrect behavior occurs for non-password inputs, that would be massively appreciated 🙏

[hirbod]

I'll report back to you soon!

[hirbod]

@mateusz1913 I can confirm. I deleted the password input and used a normal/default input and no issues. The password input is breaking something here.

[hirbod]

Looks like OP also has the same issue, his last fields are password inputs as well.

[mateusz1913]

Got it, I'll try to look at it in the next few days, thx for your help in narrowing the issue!

[hirbod]

Thanks you!

[hirbod]

By the way, I found a workaround for now: setting the input to textContentType="oneTimeCode" instead of password or newPassword resolved it for now. Looks like the extra space is somehow due to the password autofill dialog which would show on an actual device but its not in the simulator.

This issue helped me:
facebook/react-native#21911

[mateusz1913]

👋 @hirbod I reproduced the issue in the example repo (with new password form example) and I have a fix candidate, however, it would be good to test in "real-life" environment

Would you be able to apply following patch and check if issue is resolved?

diff --git a/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift b/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift
index 832a6f7..28ff603 100644
--- a/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift
+++ b/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift
@@ -220,6 +220,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: self.bottomOffset,
                         addedOffset: newBottomOffset - self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -305,6 +306,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: 0,
                         addedOffset: self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -455,6 +457,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: self.bottomOffset,
                         addedOffset: newBottomOffset - self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -560,6 +563,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                 easing: easingOption,
                 onStart: {
                     self.showAnimator.beginAnimation(initialOffset: 0, addedOffset: self.bottomOffset)
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {

[hirbod]

The patch did resolve the issue, thanks!

[depyronick]

Wow, sorry for not being able to help to fix this issue, but I am glad that it worked out and looking forward to an update.

[mateusz1913]

👋 this fix is available in v3.1.5 🚀