How to force Blur on ion-input

Ionic Framework ionic-v3
13

The setBlur() function seems to be removed from IonInput, but you can do it via its Input-Element.

In your view:

<ion-input type=“number” #myNumberInput>

In your component.ts you get the element as a view-child:

@ViewChild('myNumberInput', { static: false }) myNumberInput: IonInput;

And then you can blur the element from anywhere in your code by bluring the inner input-element:

this.myNumberInput.getInputElement().then(
    inputElement => inputElement.blur()
);

For the sake of completeness, this is how you focus it:

this.myNumberInput.setFocus();
5 Likes