How to keep focus in ion-input with clearInput

When adding clearInput=“true” to ion-input, a clear icon appears and clicking to it clears the input
… but input looses the focus (and, on android device, soft keyboard gets also hidden).

How can I keep the focus in the input (and the keyboard displayed) so that when clicking on clear icon, user can start typing the new input value straight, without the need to (re)select it again?

Thanks in adavance…

ionic info:

cli packages: (/Users/xaviergillmann/Workspace/repo/ionic/sobillit/node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1 

local packages:

@ionic/app-scripts : 1.3.7
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.0


Node : v7.9.0
OS   : macOS Sierra
npm  : 5.0.1

Actually I was not able to find the solution for 1 month, and that makes me think that it is not possible yet.

The same thing happens when trying to show a password by clicking an ‘eye’ button inside the input field.

The app simply knows that user touched something out the input field, and it makes it to loose the focus.

I saw something on Josh Morony’s blog the other day where he mentioned that if you use (touchStart) instead of (click) your inputs won’t lose focus.

i have the same problem
//here the item

Puntaje obtenido
<ion-input type=“number” #puntajeObtenido>

//when i try to focus
const prompt = this.alertCtrl.create({
title: ‘Nota’,
message: "Su nota es: " + total,

  buttons: [
      text: 'OK',
      handler: data => {

// here i try to focus when the user click in ok
// i focus the input when the alert end

same problem, the input focus and then 1 sec later the keyboard hide and lose the focus
sorry about my english

I have the same problem. When I hit clearInput it’s because I want to enter something else in the inputbox but it loses focus after the input box is cleared and the user has to tap it again.

Is there a way to fix this?

Did you manage to find a workaround to make it work?

I’ve found a solid solution, which works across all platforms, including Android and iOS. Here you go:


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


First we need to create a little helper function to prevent default events and event propagation:

	 * @private
	 * @function stopInputBubble
	 * @description Helper function to stop default events and event propagation
	 * @param {any} evt The event, which was initially triggered and should be prevented
	 * @return {void} 
	private stopInputBubble(evt: any) {


Now we need to create the function itself, which prevents closing the Keyboard on hitting the clear button within the <ion-input>:

	 * @protected
	 * @function clearInput
	 * @description Helper function to prevent closing the keyboard on hitting the clear button
	 * @return {void}
	protected clearInput(): void {

		// Create a variable, storing the native button element, alternatively use a `@ViewChild`
		const elem: HTMLElement = document.querySelector('button.text-input-clear-icon.button-clear');

		// Programatically add multiple event listeners
		['click', 'mousedown', 'touchdown', 'touchmove', 'touchstart'].forEach((evt: any) => {
			elem.addEventListener(evt, this.helperCtrl.stopInputBubble, false);

		// Add event listener for `touchend`, triggered by a mobile device
		elem.addEventListener('touchend', (evt: any) => {
			this.myInputNgModel = '';

		// Add event listener for `mouseup`, triggered by a browser
		elem.addEventListener('mouseup', (evt: any) => {
			this.myInputNgModel = '';

Don’t forget to call this.clearInput() whilst initializing your module, for example in IonViewDidLoad or something like this.

I hope it helps someone, whether it’s a little bit hacky or not :slight_smile:.


1 Like

The only real solution! thanks a lot!! :smiley: