Ionic-framework: iOS input fields & keyboard popup behaviour unacceptable

[olivermuc]

Ionic version: (check one with "x")
[ X ] 2.x

I'm submitting a ... (check one with "x")
[ X ] bug report

Current behavior:
_On iOS:_
Erratic behavior of keyboard show/hide when navigating forms. The keyboard only stays up when tapping (or scrolling) on an actual input field, resulting in a completely unacceptable user experience. It's virtually impossible to properly fill out and navigate/scroll a longer form.

Expected behavior:
I expect the keyboard to either stay up all the time until dismissed by the user, eg via a 'Done' key.
OR
NOT to hide the keyboard when scrolling (no matter what element may be panned on) and NOT hiding it when tapping anywhere inside a form.

Steps to reproduce:
Any simple form will do which includes structures such as:

<ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
</ion-item>

Other information:
I've tried with or without these config settings:

ios: {
  scrollAssist: false,
  autoFocusAssist: false
}

but they make things even worse when active, randomly hiding content when the keyboard pops up.

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[olivermuc]

Murphy's Law:

I just found the culprit, it's in the native-input.ts code, see below.

Can we change the code to accept
a) accept a custom class to prevent the unnecessary blur() (next to _input-cover_)
b) can we have the tapped.classList.contains() part be looking also at parent elements?

If I artificially bypass the below check and hence avoid the blur() the form / input experience increases 1000 fold.

Thank you for the consideration -

NativeInput.prototype._focus = function () {
        var self = this;
        self.focusChange.emit(true);
        if (self._blurring) {
            // automatically blur input if:
            // 1) this input has focus
            // 2) the newly tapped document element is not an input
            (void 0) /* console.debug */;
            var unregTouchEnd = this._plt.registerListener(this._plt.doc(), 'touchend', function (ev) {
                var tapped = ev.target;
                if (tapped && self.element()) {
                    if (tapped.tagName !== 'INPUT' && tapped.tagName !== 'TEXTAREA' && !tapped.classList.contains('input-cover')) {
                        self.element().blur();
                    }
                }
            }, {
                capture: true,
                zone: false
            });
            self._unrefBlur = function () {
                (void 0) /* console.debug */;
                unregTouchEnd();
            };
        }
    };

[olivermuc]

Until we can more flexibly control the blurring of input fields, this Config setting might help a lot of folks:

ios: {
   inputBlurring: false
} 

[jgw96]

Thanks for opening this issue, we will look into this.

[pacMakaveli]

@olivermuc I'm experiencing the same issue with my app. Where exactly did you put that config?

[olivermuc]

@pacMakaveli the inputBlurring one, as mentioned above. Add it to the ios section within the config object. Thd config itself is part of the app.module file.

[deadcore]

Hey guys is there any update on this issue?

Our application is un-usable on long forms as the page jumps up and down. Short of that is there a patch we can apply?

[chandanch]

The keyboard still stays even if the focus is moved out of the input

<ion-item>
    <ion-label fixed>Chicken weight</ion-label>
    <ion-input type="text"></ion-input>
 </ion-item>
<ion-item>
    <ion-label fixed>Chicken Head</ion-label>
    <ion-input type="text"></ion-input>
</ion-item>
<ion-item>
    <ion-label fixed>Chicken Fingers</ion-label>
    <ion-input type="text"></ion-input>
 </ion-item>

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/194