Ionic-framework: <ion-input> keyboard attach problem

[denkomanceski]

Short description of the problem:

When I focus an <ion-input> which is positioned lower than the height of the keyboard, the input is getting hidden by the keyboard (It is not floating above so I cant see what I am typing). Also when I type 1 letter, the keyboard disappears. Another thing is that when I focus an input and the keyboard comes out, and than I try to focus another input field, the keyboard is disappearing and appearing again.

What behavior are you expecting?

I am expecting the input to get scrolled up above the keyboard so I can see what I am typing. Also I should be able to type more than 1 letter

Steps to reproduce:

1. Create List with 5-6 ion-items which are containing ion inputs. Than try to focus the lowest positioned (6th in this case) input, and see that you wont be able to see the input above the keyboard and when you try to type 1 letter the keyboard will disappear

Ionic Version: 2

Browser & Operating System: iOS / Android / Chrome
I have this problem on Android Nexus 5 (I am also using crosswalk). It works fine in Ionic View, but still on focusing different input the keyboard is disappearing and appearing again.

[denkomanceski]

any progress on this ? Is there any way to help anything about it ?

[privetr]

A bug which is similar to this one :

On Android 6.0, Ionic 2 :
When an input which is at the bottom of the page is focused, Keyboard is opened. The Input goes up and we can see what we write on. But when we close the keyboard, the input stays at the same place, so there is a big blank at the end of the page (See attached images).

This seems critical.

[matitalatina]

Same bug here...
Now it's completely unusable.

[EvanWillms]

@privetr @matitalatina It appears the canonical ionic issue for tracking the blank-space-after-keyboard-input is #5432. I've found a temporary workaround with a not-yet-documented config flag that turns off the padding insert and prevents the space from getting created:

https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/5?u=evanwillms

[privetr]

@EvanWillms Thanks for the information, I will check if it solves the problem !

[adamdbradley]

I've made some fixes in input focusing. Would this group be able to install the nightly version and let me know how it's working for your app: https://github.com/driftyco/ionic/tree/2.0/scripts#installing-nightly-version

thanks

[matitalatina]

@adamdbradley It's far far better now, at least now it's usable. Good job! :)

By the way I noticed two bugs:

• If I tap on an input below the keyboard, the keyboard appears and hides the input. But now I can scroll to input and keyboard doesn't disappear when I'm scrolling. The expected behaviour, I think, the view should automatically scroll to show the input. Not a big deal for now.
• Step to reproduce the second bug: I tap on text input, the keyboard appears, I hide the keyboard with back button, I tap on a toggle, the keyboard appears. Expected behaviour: the keyboard shouldn't appear when I tap on a toggle.

I hope my findings are helpful to improve the quality of this already fantastic framework :).

[nunoarruda]

Both keyboard attach and/or scrollToBottom() would be handy for my current Ionic 2 project.

[adamdbradley]

Great thanks everyone!

Also, @nunoarruda I just added scrollToBottom() that will go in the next release, hope that helps. https://github.com/driftyco/ionic/commit/bef4a67025c76af80b5482a2878244152a1b9288#diff-b060bb2c9ba0b7db4373e59425e611bbR111

[nunoarruda]

@adamdbradley thanks! Any news on a keyboard-attach directive for v2 like v1 has?

[Manduro]

For anyone listening here: I've just posted my v2 keyboard-attach port here.

[aszmyd]

Turns out that switching for pure HTML input element makes the trick. For some reason ion-input directive is not working properly. http://stackoverflow.com/a/37083957/1433658

[finalxcode]

you can solved this issues follow these steps:
1.app.module.ts
IonicModule.forRoot(MyApp, { platforms: { ios: { scrollAssist: false, autoFocusAssist: false } } })
2.app.component.ts
platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); Splashscreen.hide(); if (platform.is('ios')) { Keyboard.disableScroll(true); } });

[royipressburger]

I have the same problem after updating to rc3

[fvdavid]

following @finalxcode code for rc4, but not work to ionic view using ios, but in android it work well.

what going wrong with it?

[anatoly-spb]

@finalxcode, thank you so much. Now I can disable scroll with scrollAssist: false, autoFocusAssist: false. But these options are not in here http://ionicframework.com/docs/v2/api/config/Config/ . Are these private options?

[sidneycorreia]

I have the same problem.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[calidion]

I encountered this problem too.
which makes input useless for ios app.
I have no idea how to solve this.

[nunoarruda]

There's several workarounds in the following SO post: http://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above-the-keyboard-when-the-keyboard-shows

[ionitron-bot[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.