Ionic-framework: issue(forms): Input, scrolling, keyboard issues for forms

@dylanvdmerwe This is great, thanks for putting this together! As for using the next and previous buttons to tab up and down the inputs, this should be working but maybe something broke recently.

Also goes for auto complete and auto correct, by default they are disabled unless they are specifically added onto the element: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts#L217

Do you think auto capitalization should be disabled by default too?

@adamdbradley

• I cannot get the keyboard buttons on iOS to shift between the various inputs. They get "confused" and the keyboard eventually just closes. Still need to test on Android when I test with other keyboards that have these buttons.
• Not sure what is best for the defaults for auto complete and auto correct. In iOS for certain keyboard types they are enabled by default - but I think it's best to follow standard <input> rules?
• I will test some permutations for auto complete and auto capitalization a bit later. Note I logged this separately here when the keyboard plugin changed.

Please note I am testing these on actual devices.

@adamdbradley I have updated the items above. Things outstanding are definite reproduceable issues.

Where are we on Android issue #1? It's totally messing up my app without it.

+1 on Android issue #1 :)

Any movement on the items listed in this issue?

@dylanvdmerwe once next beta is release (beta8) we will focus on fixing issues like this. Excuse the inconveniences

+1 on Android issue #1 :)

+1 on Android issue :

. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.

This is preventing me from fully porting from ionic1 to ionic 2 .
All the best!

This is preventing me from fully porting from ionic1 to ionic 2 .

Same here.

+1 on Android issue #1
Please fix this at the earliest! We started a new app on this, but don't want this bug to be a deal breaker and make us go back to ionic 1!

@adamdbradley, @jgw96 Is there some workaround for now?

Can you please give an update? Hard to demo with this primary functionality not working...
Thanks!

I would appreciate an update on this as well. Our ion-input elements are not scrolled into view when focusing them. We tried switching to normal input elements but that causes all kinds of other issues. Thanks!

Hello all! I can assure you that we are working hard on issues like this. Are you all mainly seeing this issue on ios or android? Or does it happen on both?

Happens on android, not sure about ios. Right now, only once I start typing the UI scrolls up to show the input. Ideally, it should happen as soon as focussed and key board pops up.

Hi,

I'm seeing several more issues on iOS on device (haven't checked on Android):

• With floating labels, when clicking an input it often temporarily displays an empty line before the value, causing the value to jump down and the input to expand vertically. With normal labels, the value is instead sometimes temporarily displaced horizontally.
• With floating labels, the caret jumps outside the input when scrolling.
• When using the cordova keyboard plugin and using the accessory bar to navigate between fields, the whole view sometimes jumps. After setting disableScroll(true), the next button works fine but the back button still causes the screen to jump. Not sure if this should be reported there instead?

Thanks for the good work on Ionic, looking forward to having the las kinks ironed out!

Same issue with keyboard and ion-input in Android. Very important issue on all apps with forms!

No update on this critical issue?

any update on this issue?

Would love for this to be looked at in an upcoming RC.

Update on this. #5 for iOS I cannot reproduce. That's working fine for me in master, can someone confirm?

Looking at #1 now.

I'm facing same issue . Is any updates on same ? .

On iOS #1 is not working great on large screens (iPad). The input is scrolled to the very top, while it would be neat to have it closer to the keyboard.

Hi,

Took some time to investigate the problem, as it occured on several devices on our side.

Android:

• Looks fine when enabling scrollAssist
• Still some bug when switching from one ion-input to another when the keyboard is already open (page scroll up to much).

iOS:

• First time, the page doesn't scroll
• Second time, on any input of the page, the page scroll up accurately
• Same as for Android, when switching between field, page scroll too much.

After some search, we found out that scroolView.scrollTo use scrollTop HTML property.
This property is limited by the theorical value: scrollHeight - clientHeight.

We just added following lines into scroll-view.js (node_modules/ionic-angular/util/):
console.log(fromY + ' =>' + y);
console.log('max theorical value: ' + (this._el.scrollHeight - this._el.clientHeight));
And the problem seems obvious.

For some reasons, when you focus the field on Android, the keyboard is generated before scrolling up, so the maximum theorical value is superior to the value we want to scroll up. On iOS, on the first time, it's not the case. So the maximum scroll up value is one.

Your turn ;)

@EDumdum How do I replicate this issue? When I have focus in an input, and the keyboard is already up, and switch to the next input, the next input scrolls in below the header. Does it not do that for you?

Still some bug when switching from one ion-input to another when the keyboard is already open (page scroll up to much).

Hi @adamdbradley

Step to create example below. Screenshot are from emulator, but we reproduce the same behaviour on devices. Form is here to add some color (blue = focused field, red = other field).

Step to reproduce

• Focus field 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVZ2xZdjFORzctZFE
  Everything is OK :)
• Focus field 1
  https://drive.google.com/open?id=0B6y5VVmSy-NVT0ZpUmd6RllPeHM
  Should scroll down instead of scroll up more :(
• Focus field 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVcExibnA5bUJTWUk
  Damn...

Step to create example

• Created a new project (ionic start -v2 myApp) => RC2
• Added scrollAssist in my app constructor
  constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
• Modified my home.html & home.ts & a little add to .scss

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

nightly build moves they input fields properly, but some places when you press back button and keyboard slides down, the inputs stay where they are (slide up) they should have come to the original place.
Secondly, i am unable to type on emulator, since it is forcing me to type on onscreen keyboard and emu is not displaying that.

@kodeine

Great thanks for the feedback! I'll use all these notes for various testing scenarios. I'll try to get a nightly out soon so everyone can test it out, thanks!

@adamdbradley
another scenario, i was on a page where i had input and keyboard was open, i clicked back button and noticed the tabs were on top of keyboard as well. so maybe we need to keep the tabs behind keyboard.

Related: https://github.com/driftyco/ionic/commit/c4cf9df387da3524d80660fb69037de77553feea

It works better in nightly!

I found a bug introduced by the recent changes though. If input A has focus and you tap input B, the keyboard hides and none of the inputs will have focus.

Also, when focusing an input, it "jumps" into position, instead of a smooth scroll animation like when you focus an input in Safari for example, is that intended?

EDIT: This is using WKWebView. Have not tested UIWebView.

I'm really interested in knowing whether there will be support for "next" button for inputs.
It's rather difficult for the user(android, not sure for ios) to not press the submit/ok button thinking it would go to the next input rather than finishing the form action.

@biesbjerg Can you describe more how to recreate those issues? When you say it jumps into position, does the header get scrolled away? Which type of input? Is the input up at the top of the app or near the bottom? Can you provide a video of the problem? Thanks

@adamdbradley this video shows the "jump into position instead of a smooth scroll" and also shows a bug I noticed, that if you have focus on an input and press back hardware button, it doesn't scroll the content back.
edit: changed gif size.

@adamdbradley This is the input focus problem, where keyboard disappears rather than focusing the tapped input.

And this is on Android, where on focus, my form makes a sudden jump, and the first focused input is not visible on screen:

Hello @biesbjerg ! We have released another nightly very recently that included some more fixes for input scrolling, would you mind giving that a try? Thanks!

@jgw96 Hi! I tested 2.0.0-rc.3-201611302233 and nothing changed, so the gif recordings are still valid issues.

Thanks for testing @biesbjerg ! Could you post a repo or create a plunkr that i can use to reproduce this issue?

@jgw96 Here you go! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Steps:

1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
2. cd 6228-ionic-keyboard-issues
3. npm install
4. mkdir www (Needed because of a cordova/ionic bug where www needs to exist or plugin installation will fail)
5. ionic state reset
6. Run on devices

The issue as shown on the iOS video is a problem with UIWebView as well as WKWebView.

The Android issue has something to do with my content being vertically centered using flexbox, but it should behave normally even so imo.

Hello @biesbjerg ! Thanks for the repo. There are a few more changes happening with scroll today which may fix this issue, I will update this post with my findings after testing.

Hi @jgw96! Cool! :-)

Touching an area that is not an input dismisses the keyboard.

I see this part (well, and other parts) has a check next to it; does this mean that it's going to be in the next release? This would be awesome for chat applications that have a Send button in an <ion-footer> on top of the Keyboard! Then the Keyboard wouldn't always close after clicking the Send button

Hi everyone. I also have the same problem. And I observe some thing.
When inputs not selected we have this case.

But when we select it, we have this one

As result I made that bad step with !important

And it works for me as temporary solution.

So.. things get really messy when you have something that uses position:relative.

In this example, the logo is the element with relative position, and if you press on the first input it gets like this:

But pressing on the second input also pushes the logo:

@jgw96 any news about this issue and about the RC.4 ?

I too am really hoping to have any news on this issue, my client is putting lots of pressure 🙉

The good news is that inputs behave so much better in the latest nightlies. I think many people, including myself as the original logger of this issue, will be happy with the fixes.

@yannbf, to be fair Ionic 2 is still prerelease software.

I understand that and find it really reasonable. I was just hoping to have an update to pass it on. I am very grateful for what the ionic team has done.

Anyways, how can test my current app with that nightly?

@yannbf npm install ionic-angular@nightly --save
and don't forget to update your package.json to angular 2.2.1

Works much better with the nightly! Thanks guys

Hello all! Thanks for using Ionic! @biesbjerg and @yannbf , would you guys mind updating to rc4 and testing please? That release has a ton of input scrolling fixes that hopefully should fix you guy's issues. Thanks!

@jgw96 Yes, already did it. It's way much better! Anxious for the final release 😄

@jgw96 After updating things got way better, but elements with position:absolute or position:fixed are still affected. I was able to get around from that page with logo I sent a print before(with another approach, removing position absolute), but as in the following page I have to have "agreement terms" in page bottom, I stil am facing the issue:

Here's the code:

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

And CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

In my case, after updating to RC5, the jumping input issue on Android remains. I just started a new project with the blank template and I copied the ion-input component from the documentation into the ion-content, the behaviour below.

As you can see every component jumps except the first one.
For the record this is the output of the ionic info command.

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

@almr193 that behaviour looks correct. The screen scrolls as a keyboard will be visible on mobile devices. The scrolling ensures that the highlighted input is always visible and not covered by the on-screen keyboard.

@dylanvdmerwe Thank you for the quick reply, the scenario I presented it looks correct and I understand that the screen scrolls as the keyboard show itself at the screen. However, I've got another odd scenario with an ion-input within an ion-list with item reorder enabled. The input jumps out of bounds and the user can not see what it is being written.

@almr193 yes, this is still an unsolved issue, unfortunately.
See Android item 1) and 4) of the initial post above.

+1 Still unresolved. Any methods from Keyboard in ionic-native doesnt seem to help on Android

I got a problem with using slides + inputs. It shows a very strange behaviour by not performing any scrolling.

+1

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

+1

This is still an issue with the latest and greatest cordova and ionic.

Is there a solution or workaround?

-- Updated --

When you start typing the input is scrolled into view but when the keyboard is initially displayed the input is obscured by the keyboard.

--

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Initial screen

Screen after selecting Domain input element

Dear ionic team ( @manucorporat , @brandyscarney , @adamdbradley )
I know you are working hard on the next version, but these keyboard issues are major important for app experience. Please consider giving them a high prio, together with other long standing issues like virtual-scroll.
Huge app size and slow startup suck, okay, but when the app is installed and running, it should give a proper experience on the basic things like keyboard handling.

Have to chime in here, @mpaland is right. There are so many outstanding bugs (some of mine are 4 months on and still open with no reply!) that are to do with basic functionality of an app. See here for example:

• #9633
• #9518
• #9514
• #8607

These have seemingly been just left to rot, whilst the team add admittedly nice features, such as the split pane recently.

Problem is, there's really no point adding new features if the core ones are still broken in some obvious way. It's arguably more important to get the fundamental things right before adding to the framework.

Loving all the hard work, but priorities seem to be wrong here.

Guys, the best way to get things prioritized and fixed is to provide _reproducible code_ that the Ionic team can test and find the issues. Screenshots and gifs are epic, but code they can use to see your issues is best. #2cents

Note that with forms and inputs, do not use display: absolute to position things.

I am also having these issues. This is not a trivial problem. How has this been an issue for a year now with seemingly no fix?

I'm having an issue when an input field is focused, the screen goes up and down every time I click on the field. Can someone help me, please?

Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.4
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

@pedrodurek it would be great if you provide a plunker so guys at ionic can reproduce.

I have found a temporary workaround for the issue of text jumping around. This is NOT a fix but essentially a hack until a better fix is implemented.

First, make sure you have these set:

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

next, in your app.module.ts, find the following:

IonicModule.forRoot(YourApp)

and make it like this:

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

This fixes any jumping issues I have, but unfortunately has the effect of pushing the navbar off the screen when a user is typing. This seems to be the only ill side effect that I have noticed, though.

@Tyler-Darby Thanks for sharing your solution, it's not the best solution but it's a reasonable one, and it worked for me.

I was having this problem and it was driving me nuts, but I finally figured out that it was caused by applying a transform: translate3d(0,0,0) to elements to force hardware acceleration. Turns out that breaks the input focus when the keyboard comes up.

I'm sure that's not the cause of everyone's issue, but hopefully it can help someone.

I have multiple platforms and I was fixing it by..

I put in app.component.ts:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

Maybe it will be helpful for someone.
Thank you guys for hints ;)

Check the video :
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Environment info :
global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

I used <input/> as <ion-input></ion-input>
Try with it.

Hi @maulikakapure ,

I'm starting my first ionic application for my company and I also have the scrolling/focus problem with the keyboard. Obviously you found a solution which you have shown in your video. Could you provide the source code? I haven't yet found the right combination of workarounds, config parameters and html tags to use.

Thanks

@Tyler-Darby Hey Tyler, where do I put the following code?

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Hi @cwiejack

Please check a simple demo here : https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Thanks.

To fix the default keyword issues with Ionic, just put the following in the imports of your app.module.ts:

    IonicModule.forRoot(MyApp, {
      scrollAssist: false,
      autoFocusAssist: false
    })

That will fix the keyboard issues right away.

@aplimovil this solved the issue on my android app ! many cheers to you good man!

What the point to have scrollAssist & autoFocusAssist if setting them to true makes apps unusable?

Are there any cases where enabling them would give some advantages?

aplimovil's fix seems to have fixed all the problems I was having!

So yeah, I'd be interested in why you'd ever set either of those to true.

@JefferE It's because Ionic's scrollAssist and autoFocusAssist features are broken in iOS (in Android they almost work ok, although the enhancements go practically unnoticed at least for me) and don't seem to have noted all the issue reports here enough so they fix it in a coming release. Hopefully they'll some day notice this thread and fix those features for good on iOS or selectively turn them off by default for now in iOS.

when ion-textarea in grid,keyboard.disablescroll(false) not works?how do with the issue

This worked for me

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

Ionic info:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

just wanted to let you guys know I have a similar problem on iOS which is that the keyboard scrolls over the input fields and the content screen is not updated to make space for the keyboard.

the important bit that I found out is that when using plugins (like the @ionic-native/keyboard)
and doing things to your interface on the moment the keyboard shows with this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) and using the flag in the interface to change something. it will not change, you will have to trigger the angular change detection yourself by importing ChangeDetectorRef and using its detectChanges() function in the subscribe.

I have created this gitrepo to show the case. Feel free to have a look. This was an eye-opener for me as I did not realise there are cases where you subscribe(()=>{}) to something, make changes, but the will not show in the interface.

became a bit wiser today :)

last thing: have a great weekend everyone!

It is bewildering to me that that this issue is over 1.5 years old and no action has been taken. This is completely ruining the flow of my app. It makes it look buggy and poor quality and we're having to result to hacks to make things come close to looking nice. @mhartington is there anything going on internally here?

I have had a phone conversation with @matthewkremer from Ionic as a follow up of using the PRO version of ionic now, and pressed that this is a major issue. He said he understood and would try to push this to a higher priority.

Same for me. This does not look nice at all..

Hey all, this is becoming a top priority for us, see @adamdbradley's tweet this morning: https://twitter.com/adamdbradley/status/916295747968040960

Expect updates in coming days/weeks

Sounds good I hope we will get life back soon without applying unnecessary hacks.

For the people using WK already, I am preparing a new keyboard plugin: cordova-plugin-ionic-wkkeyboard:

1. First uninstall ionic-plugin-keyboard

cordova plugin rm ionic-keyboard-plugin --save

1. Install new plugin:

cordova plugin add cordova-plugin-ionic-wkkeyboard --save

cc @hitendramalviya @ionut-movila @mmolhoek @Tyler-Darby @yingbaby @maulikakapure @aplimovil

There is a strange issue with this new wkkeyboard and disableing/enableing ion-textarea with FormGroups and FormControls. After reenableing the complete form the ion-textarea remains disabled. It doesn't happen while using the 'old' keyboard.

I will create an issue tonight :).

// Edit:
Probably it's an issue related to something else. Same behavior in the browser.
https://github.com/ionic-team/ionic/issues/13170

What should I look for if the keyboard simply does not trigger a resize let alone a scroll to input?

It seems like the scrolling issue should already be solved, but I am still experiencing issues on ios where when the input is in the middle of the screen the input does not get scrolled to when the keyboard is up. This is an issue both when the input is tapped on or when I use the keyboard navigation keys. Am I missing something? I have tried a bunch of the solutions presented here, but they don't seem to be working. (for additional info I am using Ionic in the browser not as a native app)

wow 2018 y nada.

me dieron esta solución pero no es del todo perfecta

.scroll-content {
padding-bottom: 0 !important;
}

Hi guys, I accidentally found that default build has _cordova-plugin-ionic-keyboard_. And when I replaced it by _ionic-plugin-keyboard_ input bugs have gone.

So my solution is:
cordova plugin rm ionic-keyboard
ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

+1

Vendettall, i tried that but it didn't work!

Do you have this annoying bug with headers toolbar?

On Thu, Mar 29, 2018 at 11:31 PM, Emmanuel Fache notifications@github.com
wrote:

Vendettall, i tried that but it didn't work!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

If you are still have this issue, please try the newer ionic keyboard plugin

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

Then set

<preference name="KeyboardResizeMode" value="ionic" />

In the config.xml

Hi,
In the app I am working, everything is working fine. But due to some reason I have to use the inputs within html table. In this case, whenever I am clicking on input it redraws the table, and resets the scroll of table.
Can anyone help here?

also seeing the transform problem happening. It's quite annoying.

For scrolling pb, i wrote a hack here : https://github.com/ionic-team/ionic/issues/10629#issuecomment-395084125

This comment above AbrahamLopez10 commented on Aug 1, 2017 worked perfectly for me, scrolling input fields into view when the Android keyboard pops up.

@dylanvdmerwe , @jgw96 @mhartington @Tyler-Darby @manucorporat @adamdbradley

Hi guys, I just created a custom directive to handle this issue on iOS and android platforms for Ionic 2 & 3 applications. Could you please check if this solve all the problems related to this scrolling issue.

I used scroll-into-view-if-needed ponyfill to make this directive

Install ion-input-scroll-into-view directive running the command npm install ion-input-scroll-into-view

Step-1
Attach the ion-input-scroll-into-view directive to the ion-input or ion-textarea as follows.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

Step-2

You have to import the IonInputScrollIntoViewModule in the module.ts of your parent component as follows

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

npm link : https://www.npmjs.com/package/ion-input-scroll-into-view
github link : https://github.com/melwinVincent/ion-input-scroll-into-view

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

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