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

Ion-input is pushed behind header after focus on iOS #17457

Closed
MRvanderPants opened this issue Feb 11, 2019 · 12 comments

Comments

9 participants
@MRvanderPants
Copy link

commented Feb 11, 2019

Bug Report

Ionic version:

[x] 4.x

Current behavior:
When focussing an ion-input element in iOS, the keyboard opens and scroll up so that the input is properly in view. If you focus another input just below it, keeping the keyboard active, the view scrolls down so that the input is halfway covered by the header.

Expected behavior:
When focussing the second ion-input I expect the view to scroll to a position where the ion-input is centered in the view.

Steps to reproduce:
Select an ion-input. When the keyboard is open, select an ion-input below it. The second input should be positioned somewhere halfway under the header.

Related code:

    <ion-list class="data-form__content">

      <ion-item class="data-form__content__item">
        <ion-label color="secondary" position="stacked">Voornaam</ion-label>
        <ion-input
          [(ngModel)]="info.klant_naam"
          type="text">
        </ion-input>
      </ion-item>

      <ion-item class="data-form__content__item">

        <ion-label color="secondary" position="stacked">Voorletters</ion-label>
        <ion-input
          [(ngModel)]="info.klant_voorletters"
          type="text">
        </ion-input>
      </ion-item>

      <ion-item class="data-form__content__item">

        <ion-label color="secondary" position="stacked">Achternaam</ion-label>
        <ion-input
          [(ngModel)]="info.klant_achternaam"
          type="text">
        </ion-input>
      </ion-item>

      ....
    </ion-list>

Other information:
I'm opening this as a new issue based on this issue, as it was locked by the ionic bot.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (C:\Users\sjoerd\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.9.0-rc.1
   @angular-devkit/schematics    : 7.0.0-rc.1
   @angular/cli                  : 7.0.0-rc.1
   @ionic/angular-toolkit        : not installed

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.17
   @capacitor/core           : 1.0.0-beta.17

System:

   NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.6.0
   OS     : Windows 10

@ionitron-bot ionitron-bot bot added the triage label Feb 11, 2019

@SmirnovM91

This comment has been minimized.

Copy link

commented Feb 12, 2019

+1

1 similar comment
@Jeroenem

This comment has been minimized.

Copy link

commented Feb 12, 2019

+1

@MRvanderPants

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

Any updates on this?

@alexdiaz

This comment has been minimized.

Copy link

commented Apr 16, 2019

+1

@alexdiaz

This comment has been minimized.

Copy link

commented Apr 16, 2019

Same issue

Example code:

<ion-header>
  <ion-toolbar>
    <ion-title>Example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label position="stacked">Input 1</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Input 2</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Input 3</ion-label>
      <ion-input></ion-input>
    </ion-item>
    ...

Video demo:
https://vimeo.com/330719598

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 8 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v11.3.0 (/usr/local/Cellar/node/11.3.0_1/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61
@denisroldan

This comment has been minimized.

Copy link

commented Apr 24, 2019

Same here:

Code:

(...)
<ng-container [formGroup]="group">
  <ng-container [formArrayName]="config.name">
    <ion-item>
      <ion-label position="stacked">{{ config.label }}</ion-label>
      <ion-input
        placeholder="{{ 'ADDRESS_LINE_1' | translate }}"
        formControlName="address_line1"
        [required]="true"
        name="address_line1"
        type="text"
      ></ion-input>
      <ion-input
        formControlName="address_line2"
        placeholder="{{ 'ADDRESS_LINE_2' | translate }}"
        [required]="false"
        name="address_line2"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'CITY' | translate }}"
        formControlName="city"
        [required]="true"
        name="city"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'REGION' | translate }}"
        formControlName="region"
        [required]="true"
        name="region"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'POSTCODE' | translate }}"
        formControlName="postcode"
        [required]="true"
        name="postcode"
        type="text"
      ></ion-input>
      <ion-input
        placeholder="{{ 'COUNTRY' | translate }}"
        formControlName="country"
        [required]="true"
        name="country"
        type="text"
      ></ion-input>
    </ion-item>
  </ng-container>
</ng-container>
(...)

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 8 other plugins)

System:

   ios-deploy : 1.9.0
   ios-sim    : 4.1.1
   NodeJS     : v10.11.0 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001

Video:
https://youtu.be/rU4fLYNtIMQ

@pegler

This comment has been minimized.

Copy link
Contributor

commented Apr 25, 2019

I believe at least one issue here is that the calculations to decide how far to scroll doesn't take into account if the keyboard is open or not. In my testing, the scrolling works as intended when the keyboard is closed, but changing focus from one input to another while the keyboard is open causes the scroll to be incorrect.

Here's the relevant code from what I can tell:

It looks like @brandyscarney worked on an ios scrolling related issue here that got me going down the right path.

I think the issue @denisroldan posted is slightly different since there are multiple ion-inputs in the same ion-item. The calculations for scrolling use the input's ion-item rather than the input itself, for some reason:

export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement, keyboardHeight: number): ScrollData {

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Apr 25, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Apr 25, 2019

@brandyscarney brandyscarney moved this from On deck ⚾️ to In progress 🤺 in Ionic Core May 14, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 14, 2019

Thanks a ton to @pegler for working on this! I created a dev build with his PR: 4.5.0-dev.201905141454.56040e0 if anyone would like to test it out and let us know if you see anything wrong. It seems to be working well for me, I will merge it in soon. 🙂

Ionic Core automation moved this from In progress 🤺 to Done 🎉 May 14, 2019

@pegler

This comment has been minimized.

Copy link
Contributor

commented May 14, 2019

It's working great for me @brandyscarney. Thanks for the quick review and merge!

@adamduren

This comment has been minimized.

Copy link

commented May 17, 2019

@brandyscarney Works for me as well. Was driving me insane! Thanks to everyone who made this happen. Any chance it can be a patch release? 4.4.1

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 17, 2019

@adamduren It will be in the next patch release, scheduled next Wednesday.

brandyscarney added a commit that referenced this issue May 22, 2019

merge release-4.4.1
* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* fix other merge conflict

* chore(): resolve conflicts from older hotifx

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* chore(): resolve merge conflicts from older hotfix

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* fix other merge conflict

* fix(react): Support for adding css classes via `className` in Ionic React components (#18231)

* fix(react): adding classname to react props

* fix(react): updating rtl to latest to fix ts error

* fix(react): changes to support className

* fix(loading): allow html content (#18242)

fixes #18135

* fix(icon): remove stroke and move fill to host element (#18241)

This removes the weird border around custom SVGs used in an ion-icon.

fixes #16483

* bug(security): allow name and slot attributes when sanitizing (#18246)

* allow name attribute

* also add slot

* fix(input): keep entire input in view when scrolling with keyboard open (#18253)

fixes #17457

* fix(tab-button): apply background-focused when tabbing into tab button (#17502)

fixes #17042

* test(theming): update theming tests

* fix(react): defaultHref fixes (#18278)

* fix(react): making children prop optional on overlay components

* fix(react): passing in defaultHref so it can be used if there is no prev view

* fix(react): making children prop optional on overlay components (#18243)

* fix(buttons): use theme/color toolbar colors for buttons (#18191)

- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840

* fix(overlay): hide scrollbars on non-scrollable content (#16767)

fixes #14178

* fix(slides): disable swiper touch preventDefault (#16728)

* fix(slides): disable swiper touch preventDefault

* fix(slides): update Swiper types

* add screenshots to test

* add screenshot descriptions

* fix(toolbar): update md toolbar button spacing and padding to match spec (#17537)

- Removes the padding from the main toolbar and individually style the components inside of it
- Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off.
- Using the class above, style the button differently to match the MD spec
- Updates the back button and menu button to use the proper size / icon size
- Removes the opacity on an activated back button, it should use the ripple for activated
- Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them
- Makes the segment in a toolbar use the min height from the toolbar
- Updates the back button so that it matches the MD spec
- Updates the header box shadow to use the old v3 datauri 

fixes #16950 fixes #14444

* fix(tabs): initialize select in the willLoad before the select call is made (#18300)

#17957

* fix(angular): preserve queryParams and fragment when going back (#18298)

fixes #16744

* fix(angular): ensure active page is not removed from change detection (#18299)

fixes #18293

* docs(toast-controller): fix description typo  (#18312)

Fix typo in component description text.

* test(components): add rtl tests and remove skips (#18319)

references #17012

* fix(css): update rtl function to prepend selectors with host-context properly (#18315)

references #17012

* chore(): remove debug and log statements (#18245)

fixes #18190

* docs(datetime): add note about timezones, fix typo (#18289)

* fix(range): update border-radius on range pin for rtl (#18321)

references #17012

* fix(angular): preserve special characters encoding when going back (#18323)

* fix(rtl): updates searchbar, fab and toggle icon positioning in rtl (#18325)

- fixes tab badge (in Chrome)
- fixes searchbar buttons
- fixes fab positioning
- fixes toggle

references #17012

* fix(segment): update segment border for rtl (#18326)

references #17012

* fix(datetime): update label direction in rtl (#18340)

* fix(picker): update the column positions in rtl (#18339)

references #17012

* fix(button): only apply has-icon-only if icon has the slot for icon-only (#18343)

fixes #18329

* tests(): add missing test statements (#18346)

* 4.4.1

* remove react changelog
@ionitron-bot

This comment has been minimized.

Copy link

commented Jun 16, 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 Jun 16, 2019

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.