Ionic-framework: clearInput doesn't seem to work on IOS

[bmagni]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I want to add clearInput attribute on my ion-inputs. My ion-inputs have ngModel attributes and some have keyup functions bind to them. On IOS, the clearInput icon shows up on focus but nothing happends when clicking it besides the loss of focus on the ion-input. It does work on Android.

Expected behavior:
I expect inputs to be empty after clicking on the clearInput icon.

Steps to reproduce:

Related code:

<ion-item>
    <ion-input [(ngModel)]="lastName" clearInput></ion-input>
</ion-item>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: Not installed
OS: OS X El Capitan
Node Version: v7.0.0
Xcode version: Xcode 8.2 Build version 8C38

[jgw96]

Hello, thanks for using Ionic! We will look into this.

[pinpointpanda]

@bmagni thanks for raising this, you beat me to it!

I'm experiencing the same issue, although I'm binding slightly differently using a FormGroup instead of ngModel.

[dalemugford]

Same issue, noticed it a few days ago. Have had to disable that feature in app.

[Killmore]

I was noticing the same issue. After playing around with it I started to notice it would work on some occasions. I think it's due to the 'hitbox' area of the clear button is very small on ios. On rare instances I could click it just right and get the expected behavior but the majority of the time it would just close the keyboard and retain the text. Just an assumption...

[elvandar06]

I face the same problem, but on desktop, and with an input of type "date" :
the hitbox of the clear button is so tiny that it becomes unusable.
The other input types work well.

[davibertolini]

Same issue here, changed to clearInput="true" and works on browser (ionic serve) but not on device. When tapping on the clear button, it just looses focus and closes the keyboard, but won't clear the text...

global packages:

@ionic/cli-utils : 1.0.0
Cordova CLI      : 6.5.0 
Ionic CLI        : 3.0.0

local packages:

@ionic/app-scripts              : 1.3.4
@ionic/cli-plugin-cordova       : 1.0.0
@ionic/cli-plugin-ionic-angular : 1.0.0
Ionic Framework                 : ionic-angular 3.1.0

System:

Node       : v7.4.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

[jasonfairhead]

Same issue. any update @jgw96 ?

[flyhuang]

Same issue.

I change "click" to "tap" in ionic/src/components/input/input.ts

'<button ion-button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>'

It works fine.

[jasonfairhead]

@flyhuang thanks!

[jasonfairhead]

anyone notice that if using --prod to build this fix no longer works?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.