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

[v4] ion-input focus on iOS pushes input behind ion-header when keyboard presented #16076

Closed
philliphartin opened this issue Oct 25, 2018 · 3 comments
Labels
needs: reply the issue needs a response from the user

Comments

@philliphartin
Copy link

philliphartin commented Oct 25, 2018

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/Users/philliphartin/.nvm/versions/node/v8.11.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.7.4
   @angular-devkit/schematics    : 0.7.4
   @angular/cli                  : 6.1.4
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 7 other plugins)

System:

   ios-deploy : 2.0.0
   ios-sim    : 7.0.0
   NodeJS     : v8.11.3 (/Users/philliphartin/.nvm/versions/node/v8.11.3/bin/node)
   npm        : 5.6.0
   OS         : macOS
   Xcode      : Xcode 10.0 Build version 10A255

Describe the Bug
When tapping on an ion-input the view is scroll assisted to the very top of the screen, resulting in the input being located behind the ion-header and it fixes the in behind the ion-header.
A video demo of the bug in an app we're working on: https://youtu.be/BCSvphDrEzo

Steps to Reproduce
Steps to reproduce the behavior:

  1. Create a standard page, using an ion-header and ion-content.
  2. Create a number of ion-inputs, enough that they cover 75% of the screen.
  3. Run the app on an iOS device with smaller screen size (i.e. iPhone 5s)
  4. Click/focus on an input
  5. Watch the keyboard appear
  6. See that in some cases the input that is focused on appears behind the ion header when the keyboard appears

Related Code
I've added a gist of the markup to test: https://gist.github.com/pjhartin/06ac14785e12ea109f1183c69e57e2e5

Expected Behavior
I would expect the scroll assist when the keyboard appears to fix the input inside the viewport with a bit of margin/padding from the top, or at least not behind the header.

Additional Context
It would seem that from playing around with different amounts of content on the screen: if there is enough content for the keyboard to want to "push up" then the bug occurs.

@ionitron-bot ionitron-bot bot added the triage label Oct 25, 2018
@philliphartin philliphartin changed the title Ionic v4 - ion-input focus on iOS pushes input behind ion-header when keyboard presented [4.0.0.-beta.13] ion-input focus on iOS pushes input behind ion-header when keyboard presented Oct 25, 2018
@philliphartin philliphartin changed the title [4.0.0.-beta.13] ion-input focus on iOS pushes input behind ion-header when keyboard presented [v4] ion-input focus on iOS pushes input behind ion-header when keyboard presented Oct 25, 2018
@paulstelzer
Copy link
Contributor

Thanks for your issue! Could you please check if this is still an issue in beta.17? That would be very nice :)

@paulstelzer paulstelzer added needs: reply the issue needs a response from the user and removed triage labels Dec 7, 2018
@ionitron-bot
Copy link

ionitron-bot bot commented Jan 6, 2019

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!

@ionitron-bot ionitron-bot bot closed this as completed Jan 6, 2019
@ionitron-bot
Copy link

ionitron-bot bot commented Feb 5, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: reply the issue needs a response from the user
Projects
None yet
Development

No branches or pull requests

2 participants