Click doesn't work on ion-item with ion-input on Ionic 2 RC1


#1

Just rolled out to RC1 and it seems that (click) on ion-item stopped working on iOS device when it contains an ion-input in it. Here’s my code:

<button ion-item (click)="selectRecipients()">
    <ion-label stacked>To</ion-label>
    <ion-input type="text" [disabled]="true" #recipients tappable placeholder="Select recipients">  </ion-input>
</button>

Works on Android and Mobile Web. Just doesn’t work on iOS device or simulator.



My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.5
ios-sim version: Not installed
OS: Mac OS X Sierra
Node Version: v6.7.0
Xcode version: Xcode 7.3.1 Build version 7D1014



#2

+1 Same here :slight_smile:

    <ion-item>
  <ion-label stacked>Address</ion-label>
  <ion-input type="text" id="autocomplete" formControlName="address" (click)="showAddressModal()" [disabled]="isAddressInputDisabled"></ion-input>
</ion-item>

My system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.37-5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Sierra
Node Version: v6.7.0
Xcode version: Not installed


#3

+1
I need to disable the focus in the ion-input when I click the ion-item

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v6.0.0
Xcode version: Not installed


#4

(May have better luck creating a new thread, and explaining the exact problem what is not working, as this one explicitly mentions RC1 in the title and people might ignore so old stuff)


#5

+1
to confirm that the bug still does exist in ionic 3.0.1.

my work around is:
1). put the whole thing in ion-row
2). separate each component in ion-item by wrap it with ion-col
3). then wrap each separated component with ion-item again

here what I mean:

Let’s say we have this:

<ion-item>
    <ion-label stacked>Address</ion-label>
    <ion-input type="text" id="autocomplete" formControlName="address" (click)="showAddressModal()" [disabled]="isAddressInputDisabled"></ion-input>
</ion-item>

it should become this:

<ion-row>
    <ion-col col-3>
        <ion-item>
            <ion-label stacked>Address</ion-label>

        </ion-item>
    </ion-col>

    <ion-col>
        <ion-item>
            <ion-input type="text" id="autocomplete" formControlName="address" (click)="showAddressModal()" [disabled]="isAddressInputDisabled"></ion-input>
        </ion-item>
    </ion-col>
</ion-row>

The ion-row will help to make those components arranged in the same line, the ion-col helps to split each component, and ion-item helps to icing those components. So, the work around make it looks similar to the original one, but the click even will work.

Hope this work around will help you guys.