ion-input requires two clicks inside ion-item :V2 RC4

[ionitron-bot]

Original issue by @joshuaohana on 2016-12-23T20:54:06Z

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

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:
ion-input requires two taps to fire (click) event

I have an ion-input, besides an ion-label, inside an ion-item, inside a form, inside an ion-list. I have a (click) event tied to that input, as it's read only (I have it open up a modal). The input works find when running on desktop browser, but on iPhone 6 device the first click seems to blur the input but a second tap is required to fire the (click) event

Expected behavior:
I would expect a single click on the input to fire the (click) event

Steps to reproduce:
Issue does not present itself when running in desktop browser, only on device. Relevant code below should demonstrate what's going on. 100% reproducibility with the below

Related code:

Example in a form with floating label

  <ion-list>
    <form ng-submit="addOrUpdate()">
      <ion-item>
        <ion-label floating>Type</ion-label>
        <ion-input type="text" [ngModel]="type?.name" name="type" readonly (click)="selecType()"></ion-input>
      </ion-item>
      ...

Second, less complex example

      <ion-list>
        <ion-item>
          <ion-label>Type</ion-label>
          <ion-input tappable type="text" [ngModel]="filters.selectedType?.name" name="type" readonly (click)="selectType()"></ion-input>
        </ion-item>
       ...

Other information:
Seems very related to #6944 and #6514.
One clue might be that during certain configurations (ex; as a button inside a div) the first click blurs the input and stacks the label, then the second click actually fires the event. Can't figure out how to use that knowledge to make it work though.

Things I have tried but produce the same misbehavior:

• with and without tappable
• moving the (click) event up inside the ion-item instead of on the ion-input
• making the ion-item into a and putting the click in there
• wrapping the whole thing in a div and putting the (click) in there
• excluding the form
• all of the above attempts with a (tap) event instead of (click)

I cannot figure out any workaround, which stinks, because this is a critical item in the form for my app, and it's not obvious that the user is required to click twice.

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

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0
ios-sim version: 5.0.9
OS: macOS Sierra
Node Version: v6.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[weblaunch]

I am also experiencing this issue on Ionic v4 :-/

[cesarfmacario]

I am integrating my Ionic Project with Electron and getting the same issue.

Into an Android and iOS devices works fine, but in my Electron environment, checkboxes and radio buttons requires two click events to work.

Here is my following code:

<ion-item>
    <ion-label>Acepto los <strong><a (click)="gotoCondiciones()">Términos y Condiciones del servicio</a></strong></ion-label>
    <ion-checkbox formControlName="condiciones"></ion-checkbox>
</ion-item

[leapinweasel]

Having this same issue, on Ionic 3.12.1 (with Angular 4), with Inputs and Radios. The input below has the issue, however the button doesn't have the issue.

<ion-item *ngIf="!foo">
<ion-label floating>Bugged Input</ion-label>
<ion-input type... [(ngModel)]...  [disabled]="!bar"></ion-input>
</ion-item>
<ion-item *ngIf="!foo">
<button ion-button icon-left outline color="positive" class="taskButton" [disabled]="!bar" (click)="emitComplete()">
<ion-icon name="md-checkbox-outline"></ion-icon>
Button Text
</button>
</ion-item>

[nixa9157]

This issue is also present in Ionic 4. I've tried to add "pointer-events: none" to label and input, and it's working for my use case.

<ion-item (click)="SomeItemAction()" button>
    <ion-label style="pointer-events: none" position="floating">Some floating label</ion-label>
    <ion-input style="pointer-events: none" readonly [(ngModel)]="someValue"></ion-input>
</ion-item>

With this approach I've also managed to bypass issue when there is ion-select inside ion-item and popover doesn't open until you touch edge or empty space of ion-item (which happens on iOS at least).

<ion-item>
    <ion-label style="pointer-events: none" position="floating">Select something</ion-label>
    <ion-select>
        <ion-select-option value="1">First option</ion-select-option>
    </ion-select>
</ion-item>

Of course you can put the "pointer-events: none" clause in .label-floating CSS class to make it default for all position="floating" labels, or in any other used CSS class. These code examples are just for fast pinpointing of the solution.
Hope this helps.

[Shmarkus]

This was working for me in Ionic 4.7.1 but is not working in 5.0.0 (in IOS). The pointer events hack helped me