Password input field show/hide not working properly

Ionic Framework ionic-v3
1

Password eye icon which is used for show and hide password is not working properly.

It does not show that password or hide the password when you press the button frequently.
In android it is working great but in ios it is not .

HTML:
<button ion-button clear class="eyeIcon" color="dark" type="button" item-right (tap)="showPassword(input1)"> <ion-icon name="eye"> </ion-icon> </button>

SCSS :

.eyeIcon {
      width: 60px;
      height: 40px;
      margin-right: -10px;
      padding-right: 0px;
  }
2

Why are you creating your own css instead of using icon-only?

3

Should I use “item-right” to place it on the right side of the page and avoid css ?

I want to place eye-icon on the right side of the password input field

<button ion-button clear color="dark" type="button" item-right (tap)="showPassword(input1)"> <ion-icon name="eye" item-right> </ion-icon> </button>

4

I’ve never done that, but I don’t understand why you don’t have an icon-only button.

5

I have never used icon-only button.

Why do we use that ?

6

It’s recommended in the docs.

7

Now it that right approach ?


<ion-buttons end>
      <button ion-button icon-only clear color="dark" type="button" item-right (tap)="showPassword(input1)">
        <ion-icon name="search" item-right></ion-icon>
      </button>
    </ion-buttons>