bug: Ionic hide-on-keyboard-open not working on Android

[jvannistelrooy]

Type: bug

Platform: android 4.4 webview

On some Android phones (Android 4.4, no fullscreen app), the hide-on-keyboard-open class has no effect.

I tried to debug the problem and found that:

• The keyboard-open class is not added to the body when the keyboard opens.

• If I add the keyboard-open class manually, the elements are hidden.

• If I add the class manually when the keyboard's open, and then close the keyboard, the class is correctly removed and the elements are shown.

• It makes no difference if I open the keyboard by focussing on an input field or manually with cordova.plugins.Keyboard.show().

• Adding my own event listener to native.keyboardshow works.

• Mimicking the code from the ionic source to add the class works:

  window.ionic.requestAnimationFrame(function(){
  document.body.classList.add('keybord-open');
  });

I haven't been able to pinpoint the exact problem yet.

[paishin]

+1

[braxtondiggs]

+1

[milliger]

+1
this also happens on Android 5.0.1

[jackrr]

+1
seeing this on Moto G Android 5.0.2

[dbaq]

+1

nexus 5, android 5

[Yuripetusko]

+1 here on nexus 5

[Yuripetusko]

How did you do "If I add the class manually when the keyboard's open, and then close the keyboard, the class is correctly removed and the elements are shown."

Would be nice to have temporary solution

[Yuripetusko]

I used .keyboard-open {} class as a temporary solution

[bradmartin]

+1

[svanson]

+1

[okonon]

+1. Same here.

OS: Mac OS X Yosemite
Node Version: v0.10.26
Cordova CLI: 4.2.0
Ionic CLI Version: 1.3.13
Xcode version: Xcode 6.2 Build version 6C131e 
ios-sim version: 3.1.1 

[clawish]

👍 +1

[Fayozjon]

clawish

http://alturka.com/anyoption_capital

23.03.2015, 16:16, "clawish" [email protected]: +1

—Reply to this email directly or .

[mapierce]

+1

[pgorsira]

+1

[jadsalhani]

The class is working fine for me (Nexus 5 and iPhone 5s), except it is slow to activate on Android; After the keyboard fully opens the elements hide and after the keyboard fully hides the elements show (with an additional 1s delay as well in each case)

[bradmartin]

@jsalhani same here. It works but is slow on Android (Galaxy S3 and S5). Takes approximately 1 second to fully hide the elements.

[eve-amandine]

@jsalhani @bradmartin +1
The same for me on Android (4.4.2), it's very slow.
On iOS, the class "keyboard-open" is added but sometimes isn't removed when the keyboard has been closed.

[tlancina]

Hey all,
Adding that particular class to the body causes an expensive reflow, which makes scrolling inputs below the keyboard into view pretty janky on Android. Assuming most users wouldn't need to hide elements and not wanting to penalize them, we moved it into a setTimeout after 400ms to still hide things like the tab bar when the keyboard shows. Admittedly, this looks pretty bad for elements that you want to disappear immediately, however there is nothing stopping you from adding the class yourself as soon as the keyboard plugin event fires. I'm going to close this as a wontfix for the aforementioned reasons, but if you want elements to hide immediately you can simply do (at your scroll animation's peril):

    window.addEventListener('native.keyboardshow', function(){
      document.body.classList.add('keyboard-open');
    });

I've updated the documentation to reflect these changes as well.

[sryze]

Just wanted to say that the above suggestion by @tlancina (which is also in the docs for the keyboard plugin) will conflict with ionic's implementation of adding keyboard-open to elements after 400ms if you manage to get the keyboard to close during this interval.

For example, you can do this by tapping on an input and immediately tapping on empty space to cause the keyboard to close. It may be hard to do on Android but is 100% reproducible on iOS for me.

To fix it I had to replace keyboard-open with something else like fast-keyboard-open and the following piece of CSS (for footers in this case):

.fast-keyboard-open {
  .bar.bar-footer {
    display: none;
  }
  .has-footer {
    bottom: 0;
  }
}

However, this doesn't fix the Android problem completely - I still can see the footer bar lifting up together with the keyboard and disappearing only when it's fully shown (when animations end).

Edit:

I measure the keyboard animation delay on my Android emulator, it takes about 200ms:

window.addEventListener('native.keyboardshow', function() {
  console.log('native.keyboardshow:', new Date().getTime()); 
})
$('input').on('focus', function() {
  console.log('input focus:', new Date().getTime());
});

input focus: 1485849601498
native.keyboardshow: 1485849601768
input focus: 1485849603771
native.keyboardshow: 1485849604027
input focus: 1485849606269
native.keyboardshow: 1485849606504

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.