Ionic-framework: Input Keyboard Focus in iOS

[kumaresan-cgvak]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

if we place Textfield / Input inside Grid View. then upon focus, keyboard hides the textfield.

Expected behavior:

if we place Textfield / Input inside Grid View. then upon focus, textfield should scroll automatically.

Steps to reproduce:

Related code:

 <ion-grid>
    <ion-row>
      <ion-col>
        <h5 text-center padding>PP</h5>
      </ion-col>
      <ion-col>
        <h5 text-center padding>RP</h5>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item>
             <ion-label stacked>Current Price</ion-label>
            <ion-input type="number" placeholder="Type Here"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
      <ion-col>
        <ion-list>
          <ion-item>
            <ion-label stacked>Current Price</ion-label>
            <ion-input type="number" placeholder="Type Here"></ion-input>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

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.0 
ios-sim version: 5.0.12 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[michaelyuen]

Confirmed.

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3 Build version 8E162

If I downgrade Ionic to 2.2.0, the desired behavior is restored. After some debugging, I see that in 2.2.0 and 2.3.0, padding-bottom of 300px is added to the scroll-content when the keyboard is up. For some reason, in 2.3.0 the content inside of scroll-content doesn't respect the padding-bottom. Hopefully that helps.

[jgw96]

Hello, thanks for using Ionic! Unfortunately there was a regression in 2.3.0 that caused an issue with scroll events. Would you guys mind updating to 3.0.1 as that has a fix for this issue.

[jhonathas]

Great, I will, thank you team.

2017-04-07 11:41 GMT-03:00 Justin Willis [e-mail]:

Hello, thanks for using Ionic! Unfortunately there was a regression in
2.3.0 that caused an issue with scroll events. Would you guys mind updating
to 3.0.1 as that has a fix for this issue.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/10854#issuecomment-292555257,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABuEzyktF6gV1NV0MsTcog_p_8a2p4nks5rtksUgaJpZM4MjkEE
.

--

Jhonathas Matos

email: [email protected]

[kumaresan-cgvak]

@jgw96 Still the issue is not resolved.
````
Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.3 Build version 8E162
````

[kumaresan-cgvak]

@jgw96 @brandyscarney Still i face ion-input keyboard focus in iOS. Which happens when nesting ion-input inside ion-grid.

Please find the below example.
<ion-grid no-padding no-margin> <ion-row> <ion-col> <h5 text-center padding>PP</h5> </ion-col> <ion-col> <h5 text-center padding>RP</h5> </ion-col> </ion-row> <ion-row> <ion-col> <ion-list> <ion-item> <ion-label stacked>Current Price</ion-label> <ion-input type="number" placeholder="Type Here...."></ion-input> </ion-item> </ion-list> </ion-col> <ion-col> <ion-list> <ion-item> <ion-label stacked>Current Price</ion-label> <ion-input type="number" placeholder="Type Here...."></ion-input> </ion-item> </ion-list> </ion-col> </ion-row> <ion-row> <ion-col> <ion-list> <ion-item> <ion-label stacked>Current Price</ion-label> <ion-input type="number" placeholder="Type Here...."></ion-input> </ion-item> </ion-list> </ion-col> <ion-col> <ion-list> <ion-item> <ion-label stacked>Current Price</ion-label> <ion-input type="number" placeholder="Type Here...."></ion-input> </ion-item> </ion-list> </ion-col> </ion-row> </ion-grid>

````
Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.8.0
Xcode version: Xcode 8.3.1 Build version 8E1000a
````

[gopi2mohan]

Any update on the above issue i am still facing this issues here my ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 1.3.12
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.5.0

System:

ios-deploy : 1.9.2
Node       : v6.11.2
npm        : 3.10.10
OS         : macOS High Sierra
Xcode      : Xcode 9.0 Build version 9A235

[ionitron-bot[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[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

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