Ionic-framework: Click on ClearInput icon hide keyboard

[mifkys]

Click on ClearInput icon hides keyboard. It's not so useful when I want to input some text after clearing field. Need one more tap. Tested on Android 5.1.1 and 6.0.

Steps to reproduce:

1. Insert some text to Input-field and change focus.
2. Focus on input again (keyboard shown) and tap on ClearInput icon (keyboard hide)
3. Focus in input to insert some new text (keyboard shown again).

<ion-list>
    <ion-item>
        <ion-input type="text" id="from-city" clearInput></ion-input>
    </ion-item>
</ion-list>

Which Ionic Version?
2.x

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.36
Ionic App Lib Version: 2.0.0-beta.19
OS: Windows 10
Node Version: v6.5.0

[flyhuang]

I found the same issue on ios,
when i tap clear input icon, keyboard & clear input icon hide together and the input content has not been cleared

[syranoMain]

I have the same behavior with ionic3
So, i don't know if there is any possibility to override the clear input method.

[fjdelarubia]

I think that I've the solution for this. The problem is that the clearInput it's a button element, so, if you click on it, the input field loses the focus and the keyboard hiddens automatically.
I just tried changing the button for an input element in input.js, line 641 or, in the repo: input.ts, line 128 (remember removing the close tag)
With this fix, when you click on the clearInput, you are clicking another input and the keyboard doesn't hide

The lines to change are the following:
'<button ion-button *ngIf="_clearInput" clear class="text-input-clear-icon" ' + 'type="button" ' + '(click)="clearTextInput($event)" ' + '(mousedown)="clearTextInput($event)" ' + 'tabindex="-1"></button>' +

to this:
'<input ion-button *ngIf="_clearInput" clear class="text-input-clear-icon" ' + 'type="button" ' + '(click)="clearTextInput($event)" ' + '(mousedown)="clearTextInput($event)" ' + 'tabindex="-1">' +

[jjacobs33589]

I have this happening in my ionic app too. When I use clearInput it's because I want to type something else in the input box but it's really annoying to have the keyboard disappear and have to retap the input box. Is there a way to get the input box to clear while leaving the keyboard open @mifkys @jgw96 ?

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/130