(click) event doesn't work, while input element is focused


Hi there,
I am building PWA.
I have two tabs page and on the bottom of one tab I have input for a chat messages. It is placed in ion-footer. I have a problem that while the input is focused (click) event on the button doesn’t trigger. So basically I have to click twice, first click to unfocus and second to post the message. I tried with ion-item and textarea with button separated in the ion-grid.
It seems that the same input with button works if I place it into ion-content

The most confusing thing is, that if I click on ion-card which opens modal and it is placed in ion-content, it works at first click even if input is focused.

version: “ionic-angular”: “3.9.2”

<ion-footer [class.keyboardOpenFooter]="keyboard.isOpen()">
      <ion-item *ngIf="loggedIn==true && activeGame!= undefined">
          <ion-input rows="1" placeholder="Message"  [(ngModel)]="message"></ion-input>
          <button ion-button icon-only clear item-right (click)="postMessage()" color="primary">
                <ion-icon  name="send"></ion-icon>
      <!-- same behavior
            <textarea class="text-input" rows="1" placeholder="Message"  [(ngModel)]="message 
             <button ion-button icon-only clear (click)="postMessage()"  color="primary"><ion-icon  
    <span *ngIf="loggedIn==false">Za komentiranje se je potrebno prijaviti.</span>

Looks like this:

Any ideas? Thank you!!!


I am having the same issue



the eye icon cannot be clicked while the focus is on input. How to solve the problem any help would be appreciated. Thanks !!!


The reason is input box overlays the eye icon, so the eye icon cannot be clicked.
You can use this style for eye icon.
<ion-icon item-end [name]=“passwordIcon” class=“passwordIcon” (click)=‘hideShowPassword()’>
.passwordIcon {
position: relative !important;
top: 0 !important;
margin: 0 auto !important;
font-size: 24px !important;
color: #262626;