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

Ionic Framework ionic-v3
1

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-toolbar>
      <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>
           </button>
      </ion-item>
     
      
      <!-- same behavior
      <ion-grid>
        <ion-row>
          <ion-col>
            <textarea class="text-input" rows="1" placeholder="Message"  [(ngModel)]="message 
            </textarea>
          </ion-col>
          <ion-col>
             <button ion-button icon-only clear (click)="postMessage()"  color="primary"><ion-icon  
          name="send"></ion-icon></button>
          </ion-col>
        </ion-row>
      </ion-grid>-->
  
    <span *ngIf="loggedIn==false">Za komentiranje se je potrebno prijaviti.</span>
  </ion-toolbar>
</ion-footer>

Looks like this:
chatInputIonic

Any ideas? Thank you!!!

2

I am having the same issue
module

2019-01-29%2013_23_27-Themefused

2019-01-29%2013_23_14-Themefused

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

3

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