Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: ion-item padding prevents child ion-input focus

See original GitHub issue

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

While working with a community member, it was observed that when a floating label and ion-input are nested in an ion-item, users can tap the left padding of the item and it will:

Animate the floating label to the top
Present the device keyboard
Not focus the input field

This behavior was captured for iOS with Ionic Angular 5.2.0.

Expected behavior:

When tapping the padding, it should place the input field in focus in addition to the other actions performed.

Steps to reproduce:

Create an ion-item with an ion-label and ion-input as children.
Set the position of the ion-label to floating.
Open the app on an iOS device/simulator.
Tap the far-left of the ion-item.

Please find a GIF of this behavior towards the bottom of this Issue.

Other information:

ezgif-1-05eaea0df48e

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.0 
   Ionic Framework               : @ionic/angular 5.2.0
   @angular-devkit/build-angular : 0.901.8
   @angular-devkit/schematics    : 9.1.8
   @angular/cli                  : 9.1.8
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run                             : 1.0.0

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

Issue Analytics

State:
Created 3 years ago
Reactions:5
Comments:20 (6 by maintainers)

Top GitHub Comments

5reactions

capc0commented, Jul 13, 2020

this might seem like a small issue but can impact UX quite heavy… E.g. when your login form is based of two of these inputs and the user clicks on the password label, the keyboard shows up but the input goes into the void.

Any chance to add this to the 5.3.0 milestone?

3reactions

ValisStigmacommented, Jul 21, 2020

We can confirm this as well and it is impacting users of our app. A fix would be very much appreciated

Top Results From Across the Web

bug: ion-item padding prevents child ion-input focus ... - GitHub

Not focus the input field. This behavior was captured for iOS with Ionic Angular 5.2.0. Expected behavior: When tapping the padding, it should ......

Ionic 4 – Keyboard scroll view when ion-input is focused

With Ionic 3, I fixed it with scrollPadding , scrollAssist and autoFocusAssist in IonicModule.forRoot() (app.module.ts) + Keyboard.disableScroll ...

How to remove the padding around ion-item? - Stack Overflow

It turns out that ion-item has a few --inner-padding rules that need to be overridden to stop padding appearing on it's children.

Wrong Focus With Ionic 3 Ion-Input - ADocLib

You can do it <ionitem> <ionlabel stacked>Username</ionlabel> <ioninput Learn ... focus the input when clicking the item padding in WebKit bug: ioninput ......

Webservices and cloud communication - European Commission

When it is triggered, the rest of the page darkens to give more focus to the ... <button ion-item>. <ion-icon name='planet' item-start></ion-icon>. Space....