title: Show/Hide password button not working when input is active in Ionic 3
body: <p>I am trying to implement the show/hide button for the password field in Ionic 3. I have got the code help from <a href="https://stackoverflow.com/questions/46815831/how-to-create-login-in-ionic-2-with-show-hide-password">here</a></p>
  
  <p>login.html</p>
  
  <pre><code>  &lt;ion-item&gt;
      &lt;ion-input [type]="passwordType" placeholder="Password" formControlName="password"&gt;&lt;/ion-input&gt;
      &lt;ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'&gt;&lt;/ion-icon&gt;
    &lt;/ion-item&gt;
  </code></pre>
  
  <p>login.scss</p>
  
  <pre><code>    .passwordIcon{
          font-size: 1.3em;
          position: absolute;
          right: .1em;
          top: .5em;
          z-index: 2;
       }
  </code></pre>
  
  <p>login.ts</p>
  
  <pre><code>passwordType: string = 'password';
  passwordIcon: string = 'eye-off';
    hideShowPassword() {
      this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
      this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>With the solution suggested my field looks like this.
  <a href="https://i.stack.imgur.com/2rrPL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2rrPL.png" alt="enter image description here"></a></p>