ionic2 <button> needs click twice in <ion-item> besides a <ion-input>

[emeryao]

• a button needs to be clicked twice if it is located in a ion-item besides a ion-input with html below:

<ion-item-group>      
    <ion-item>
        <ion-input type="text" placeholder="input something"></ion-input>
        <button calm outline item-right (click)="onClick()">Click</button>
    </ion-item>
</ion-item-group>

• plunker for this issue.

Steps to reproduce:

1. input something in the <ion-input>
2. click the button besides the <ion-input>
3. there will be two clicks until the button clicked

• this issue seems like that: the first click is bring the foucus out of the <ion-input> and the second click is the real click on the button.
• I'm not sure the issue is designed by purpose or a bug, but I'm think this is very bad experience.
• ionic info:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS: Win10 x64
Node Version: v6.2.0

[brandyscarney]

Thanks for the issue! This isn't an exact duplicate of #6514, but they are both caused by the same problem which is that you have to blur the input in order to click the button.

[brandyscarney]

Thanks for the issue! This will be fixed in the beta 10 release. 😄

[emeryao]

Thanks for your works @brandyscarney 👍

[joshuaohana]

@brandyscarney I am still having this same issue with RC4. In my case; however, I have a (click) event tied on an ion-input. It consistently requires two taps for the click event to fire.

• this is inside a form, inside a list

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

[oxykill]

Getting same issue with :

        <ion-label>Date</ion-label>
        <ion-input tappable type="Date" [(ngModel)]="act.date" name="date"></ion-input>
      </ion-item>

Date will need double click to show native calendar

Ionic V. 3.12.0

[dniemuth]

I'm also having the same issue as above. My date fields are requiring two clicks in order to show the calendar.

    <ion-item>
        <ion-label floating>{{ 'Due Date' }}</ion-label>
        <ion-input type="date" [(ngModel)]="date" name="date"></ion-input>
    </ion-item>

ionic V. 3.13.0

[yajuve]

Same issue for me, i need double click to show native calendar.

[luckychel]

I have fixed it by writing the following style in my .scss file:

.input-cover{
display: none;
}
Now i could able to focus on the first input field without any issue.

[AlokGupta007]

Above is not working

[jaggu07]

same for me
<ion-label class="leaveLabel">Start Date</ion-label>
<ion-item class="regitem">
<ion-input type="date" formControlName="leave_from" required placeholder="Leave From"></ion-input>
</ion-item>
<ion-label class="leaveLabel">End Date</ion-label>
<ion-item class="regitem">
<ion-input type="date" formControlName="leave_to" required placeholder="Leave To"></ion-input>
</ion-item>

After double tap only date picker opens

[trakhimenok]

@jaggu07 the issue is closed 2 years ago. I don’t think Ionic team is following old closed issues. You better create a new issue with reference to this one if still a problem.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.