Search code examples
ionic-frameworksassionic3passwordsshow-hide

Show/Hide password button not working when input is active in Ionic 3

I am trying to implement the show/hide button for the password field in Ionic 3. I have got the code help from here

login.html

  <ion-item>
    <ion-input [type]="passwordType" placeholder="Password" formControlName="password"></ion-input>
    <ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
  </ion-item>

login.scss

    .passwordIcon{
        font-size: 1.3em;
        position: absolute;
        right: .1em;
        top: .5em;
        z-index: 2;
     }

login.ts

passwordType: string = 'password';
passwordIcon: string = 'eye-off';
  hideShowPassword() {
    this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
    this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
}

I have done one modification in the .scss file and made the icon absolute so that it appears on top of the input field instead of the side. This icon click is working when the Input field is not active/selected but if I am in the middle of typing in the Input Field, the click is not working/recognized. Please help.

With the solution suggested my field looks like this. enter image description here

Solution

  • I'm not entirely sure of what

    ... and made the icon absolute so that it appears on top of the input field instead of the side

    would mean, but still, using position: absolute on top of inputs may lead to bugs specially on iOS.

    Another possible issue of your code is that buttons are designed to handle issues related with taps in mobile devices, but icons may not work properly sometimes.

    Anyway, please take a look at this working Stackblitz project to do something like this:

    enter image description here

    The code is quite simple actually - the idea is to use a button with an icon instead of just an icon to avoid issues with the tap event:

    Component

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public showPassword: boolean = false;

  constructor(public navCtrl: NavController) {}

  public onPasswordToggle(): void {
    this.showPassword = !this.showPassword;
  }

}

    Template

    <ion-header>
  <!-- ... -->
</ion-header>

<ion-content padding>
  <!-- ... -->

  <ion-item>
    <ion-input placeholder="Password" [type]="showPassword ? 'text' : 'password'" clearOnEdit="false"></ion-input>
    <button (click)="onPasswordToggle()" ion-button clear small item-end icon-only>
      <ion-icon [name]="showPassword ? 'eye-off' : 'eye'"></ion-icon>
    </button>
  </ion-item>
</ion-content>

    EDIT

    Based on your comments, one way to keep the button inside of the border would be not to apply the border to the input, but to the ion-item.

    Something like this for example:

    ion-item {
  border: 1px solid #ccc;
  border-radius: 10px;
}

    would result in:

    enter image description here