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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 20 (6 by maintainers)

Commits related to this issue

fix(input): properly focus the input when clicking the item padding in WebKit (#21930) Related WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=214859 Issue Number: fixes #21509 — committed to ionic-team/ionic-framework by brandyscarney 4 years ago

Most upvoted comments

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?

capc0 on Jul 13, 2020

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

ValisStigma on Jul 21, 2020

Hi all, I’ve created a dev build with a potential fix if you could test it out. During my testing it seems to fix this bug:

# for an angular app
npm i @ionic/angular@5.4.0-dev.202008172228.a3d2b59 --save

# for a react app
npm i @ionic/react@5.4.0-dev.202008172228.a3d2b59 --save
npm i @ionic/react-router@5.4.0-dev.202008172228.a3d2b59 --save

# for a stencil / vanilla JS app
npm i @ionic/core@5.4.0-dev.202008172228.a3d2b59 --save

Thanks!

brandyscarney on Aug 17, 2020

I have the same issue if clicking to the right of the label text (over the input) and on the label text. Clicking anywhere on the ion-item should focus the input.

I have ionic version 5.2.1. Testet on iOS.

torgnywalin on Jun 15, 2020

In our app it seems to happen when clicking anywhere on the ion-item that wraps the ion-input (including the ion-label which for us is not configured as a floating label). We do not see it happen on Android nor desktop Chrome.

From my testing in our app, Ionic v5.1.1 is the version where the behavior was introduced where clicking on the ion-item outside of the ion-input (such as on an ion-label) automatically puts focus in the ion-input. Like @liamdebeasi, I was suspicious of the delegatesFocus that was introduced being the change which introduced this behavior.

KevinKelchen on Jul 7, 2020

It appears this behavior is due delegatesFocus: true in https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx#L25. delegatesFocus is a property that can be set on shadow roots. When this is true, focus events are delegated to the focusable element inside of the shadow dom.

For some reason, this is the native input inside of ion-input rather than ion-input itself.

liamdebeasi on Jul 1, 2020