issue(forms): Input, scrolling, keyboard issues for forms

[dylanvdmerwe]

Right now, the way Ionic handles form input can be better. Ionic 1 had awesome defaults for form inputs with regards to keyboard handling, content scrolling, etc. Ionic 2 needs to be made consistent, and more importantly, work properly for form inputs consistently across all platforms (iOS, Android, Windows).

See this repo for the code example which should be run on devices: https://github.com/dylanvdmerwe/ionic2-formtest

Android:

• 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• 3. Touching an area that is not an input dismisses the keyboard.
• 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options. [unable to test as cannot get a keyboard with next and prev buttons]
• 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

iOS:

• 1. When selecting an input the entire form content should be scrolled so that the selected item is visible after the keyboard is displayed.
• 2. When the keyboard is hidden, set the scrolling back to it's original position and remove added padding.
• 3. Touching an area that is not an input dismisses the keyboard.
• 4. If the user selects a second input after filling in the first one, the screen should be scrolled to focus on the newly selected input field.
• 5. Some keyboards have a next, previous and done button. These should be hooked into the form inputs on the page in order to allow the user to cycle through the input options.
• 6. Support for autocorrect, autocomplete & autocapitalize and combinations thereof.

Note that this issue has nothing to do with forms or inputs in a slides component. That would be a seperate consistency check to perform.

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.4-201604170622
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS:
Node Version: v5.7.0

[adamdbradley]

@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?

[dylanvdmerwe]

@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.

[dylanvdmerwe]

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

[kevinATglympse]

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

[layton-glympse]

+1 on Android issue #1 :)

[dylanvdmerwe]

Any movement on the items listed in this issue?

[manucorporat]

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

[eusthace811]

+1 on Android issue #1 :)

[shangyilim]

+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!

[kalcheat]

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

Same here.

[cyberabis]

+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?

[IceyIsAlreadyTaken]

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

[ghost]

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 

[mmolhoek]

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!

[Tyler-Darby]

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?

[mmolhoek]

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.

[ionut-movila]

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

[mlynch]

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

[hitendramalviya]

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

[manucorporat]

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

2. Install new plugin:

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

[manucorporat]

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

[loopezz]

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.
#13170

[Jahrenski]

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

[jgerstle]

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)

[sephito]

wow 2018 y nada.

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

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

[ykulynych]

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

[edisonmatoso]

+1

[emrade]

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

[ykulynych]

Do you have this annoying bug with headers toolbar?

…

On Thu, Mar 29, 2018 at 11:31 PM, Emmanuel Fache ***@***.***> 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 <#6228 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp> .

[mhartington]

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

[krishnatiwarigithub]

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?

[ricardoparro]

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

[Stephane84]

For scrolling pb, i wrote a hack here : #10629 (comment)

[AndrWeisR]

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

[melwinVincent]

@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

[ionitron-bot]

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!

[ionitron-bot]

Issue moved to: ionic-team/ionic-v3#47