Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
dylanvdmerwe opened this issue Apr 19, 2016 · 109 comments

Comments

Projects
None yet
@dylanvdmerwe
Copy link
Contributor

commented Apr 19, 2016

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

This comment has been minimized.

Copy link
Member

commented Apr 19, 2016

@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 adamdbradley self-assigned this Apr 19, 2016

@dylanvdmerwe

This comment has been minimized.

Copy link
Contributor Author

commented Apr 19, 2016

@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

This comment has been minimized.

Copy link
Contributor Author

commented Apr 20, 2016

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

@kevinATglympse

This comment has been minimized.

Copy link

commented May 4, 2016

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

@layton-glympse

This comment has been minimized.

Copy link

commented May 4, 2016

+1 on Android issue #1 :)

@dylanvdmerwe

This comment has been minimized.

Copy link
Contributor Author

commented Jun 4, 2016

Any movement on the items listed in this issue?

@manucorporat

This comment has been minimized.

Copy link
Member

commented Jun 4, 2016

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

@brandyscarney brandyscarney added this to the 2.0.0-beta.9 milestone Jun 6, 2016

@jgw96 jgw96 modified the milestones: 2.0.0-beta.11, 2.0.0-beta.10 Jun 27, 2016

@jlsuarezs

This comment has been minimized.

Copy link

commented Jun 30, 2016

+1 on Android issue #1 :)

@shangyilim

This comment has been minimized.

Copy link

commented Jul 6, 2016

+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 comment has been minimized.

Copy link

commented Jul 12, 2016

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

Same here.

@cyberabis

This comment has been minimized.

Copy link

commented Aug 18, 2016

+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

This comment has been minimized.

Copy link

commented Aug 31, 2017

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

@ghost

This comment has been minimized.

Copy link

commented Sep 18, 2017

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

This comment has been minimized.

Copy link

commented Sep 29, 2017

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

This comment has been minimized.

Copy link

commented Oct 5, 2017

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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

@mlynch

This comment has been minimized.

Copy link
Member

commented Oct 6, 2017

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

This comment has been minimized.

Copy link

commented Oct 6, 2017

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

@manucorporat

This comment has been minimized.

Copy link
Member

commented Oct 9, 2017

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

This comment has been minimized.

@loopezz

This comment has been minimized.

Copy link

commented Oct 17, 2017

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

This comment has been minimized.

Copy link

commented Dec 4, 2017

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

@jgerstle

This comment has been minimized.

Copy link

commented Dec 31, 2017

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

This comment has been minimized.

Copy link

commented Feb 8, 2018

wow 2018 y nada.

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

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

@ykulynych

This comment has been minimized.

Copy link

commented Mar 21, 2018

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

This comment has been minimized.

Copy link

commented Mar 28, 2018

+1

@emrade

This comment has been minimized.

Copy link

commented Mar 29, 2018

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

@ykulynych

This comment has been minimized.

Copy link

commented Mar 30, 2018

@mhartington

This comment has been minimized.

Copy link
Member

commented Mar 30, 2018

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

This comment has been minimized.

Copy link

commented Apr 4, 2018

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

This comment has been minimized.

Copy link

commented May 28, 2018

also seeing the transform problem happening. It's quite annoying.
video-to-gif

@Stephane84

This comment has been minimized.

Copy link

commented Jun 6, 2018

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

@AndrWeisR

This comment has been minimized.

Copy link

commented Jun 26, 2018

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

This comment has been minimized.

Copy link

commented Sep 27, 2018

@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

This comment has been minimized.

Copy link

commented Nov 1, 2018

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

This comment has been minimized.

Copy link

commented Nov 1, 2018

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

@ionitron-bot ionitron-bot bot closed this Nov 1, 2018

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 1, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.