Ionic keyboard pops up automatically and doesn't dismiss properly

1

Here is a video of the issue I have been running into. http://youtu.be/_7FcpTjUTok

The keyboard only seems to dismiss properly if you tap above the input elements rather than underneath them.

2 Likes
2

Hey @nbwar, can you provide some information about this.

  • What version of ionic are you testing with.
  • Is this a phonegap build project?
3

Thanks for the quick response @mhartington. The app was created using: ionic start myApp sidemenu
The bug persists using both ionic beta6 and ionic beta 8
I also tried updating to the latest version of the ionic keyboard plugin with no luck.

Unrelated but also experiencing issues with adding dependencies to angular. ie: I tried adding restangular as a dependency and it throws uncaught object in the ionic.bundle.js

4

Alright, can you test it with the nightly builds of ionic.
If possible, can you post an example of your app on codepen or plnkr? This way I can see whats going on.

5

The video was shot using v1.0.0-beta.8-nightly-219

Here is essentially what I have on codepen http://codepen.io/anon/pen/CfLAH?editors=101
Also, I can put up a repo if that would be more helpful to you.

6

I can try with this, but a repo would be helpful too, want to send me a link in a PM

7

@mhartington Can’t seem to send you a private message. Here is the repo https://github.com/nbwar/ionic_test

8

Hey so I looked at the project, and found the solution.

Disable scrolling (webview scrolling) in your .run function

.run(function($ionicPlatform, $location, $rootScope, $state, $window, userService, sessionService) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      //This disables scrolling
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault()
    }
  })

Then remove `scrolling=“false” in your registractin-modal.html

<ion-content class="has-header">

Once I did that, everything was great. Nice looking app BTW! :smile:

9

Just tried this with no effects on keyboard poping … :confused:

Edit :

Ionic beta 14
Problem in modal and non modal pages
Keyboard doesn’t popup every time its random :open_mouth:
With and without sidemenu
Keyboard pop up with two inputs and more in page, doesn’t with one input

2 Likes
10

Can you put together a codepen or plunkr for me to demo on a device .

11

I made a hack :

$timeout to display none one input for the first 500ms.
And css to fake the input during the 500ms.

With that the keyboard doesn’t popup and we can’t see the hack.

The app is in app store validation !

Thanks for the reply

12

Issue still persists in rc0 :frowning:

13

I have this issue why is it caused? The keyboard shows and hides very fast after pressing button submit with empty inputs @mhartington @perry @bengtler

I am using ng-messages. The Ionic version is 1.0.0 - 4 and my SO version is Android 5.X

image
IMG_0239.JPG1936Ă—2592 1.48 MB



image
IMG_0257.JPG1936Ă—2592 1.73 MB

To solve this I could use ng-disabled=“form.$invalid” but I would like to know the problem.

14

sounds like an input gets the focus…
you could try ionic.DomUtil.blurAll() in your submit function.

but please try last ionic version.

are you using js-scrolling and ionic keyboard?

15

I will try to update to the last version. Yes @bengtler, I am using ionic keyboard and the js-scrollling (the default configuration in RC4)

16

And maybe you can provide the controller and template of the view

17

is there any update on this one?

18

I found a solution!

This bug has been bothering me for the past few days. In my special case, the user clicks a button and a modal with 2 inputs shows up. The keyboard pops up as well and cannot be dismissed (it happens to cover the input since the input is at the bottom of the modal… clicking elsewhere in the modal has no effect. The user has to close the modal, and with the keyboard open, find a input elsewhere, click on it and click elsewhere to blur it for the keyboard to close).

Upon closer investigation, I found out that it is related to what part of the button is clicked (e.g. click on the center and the bug happens, click on the right-bottom corner and it’s okay. maybe related to the position of the button and the textbox in the modal that the button opens up. And FYI, the modal slides in from the bottom, not the default(from the right), same as the one in the YouTube video, could this be related?)

It only happens on iPhone, never happening on android (both are with ionic keyboard plugin, and in AndroidManifest.xml android:windowSoftInputMode=“adjustResize”, so webview is resized on android when the keyboard pops up but not resized on iPhone).

I suspect that it has something to do with the removal of 300ms delay? Seems that the click event has been processed twice? The first click opened up the modal, the second click fell on the input box, but since it shouldn’t, the input box was blurred by some JS immediately, but after some delay the keyboard still poped up? (I haven’t looked into the source code of Ionic/AngularJS, just my speculation, may be wrong).

Anyway, the solution that I found at last was quite simple: Wrapping all the input in

<div ng-style="{'pointer-events':inputOkay?'all':'none'}">
        ...
        <input ...
        ...
</div>

And in the controller

$timeout(function(){
  $scope.inputOkay=true;
}, 500);

Works like a charm.

Ionic: v1.3.1

1 Like
19

Did you find any solution?

20

not working in my case. any other solution? @mhartington @kevinwang15