featureRequest: Blur ion-input

Feature Request

Ionic version: [x] 4.x

my ionic info:

   Ionic CLI                                                  : 5.4.13
   Ionic Framework                                     : @ionic/angular 4.11.7
   @angular-devkit/build-angular             : 0.803.21
   @angular-devkit/schematics                 : 8.1.3
   @angular/cli                                          : 8.1.3
   @ionic/angular-toolkit                          : 2.0.0

I wanted to blur an ion-input but that’s not working as expected. It just does nothing. No error Messages.

Here’s what I did:

<form (ngSubmit)="safe()">
<ion-input #name [(ngModel)]="name" name="name"></ion-input>
</form>


@ViewChild('name' , { read: ElementRef, static: false }) name: ElementRef;

//static=true doenst work either

safe(){

this.name.nativeElement.blur();

// or this: this.name.nativeElement.setBlur();
}

Is there any other way to blur an ion-input? I didn’t find any functions in the console.log() of the ion-input that could provide such functionality…

I know that ion-input can trigger functions on (ionBlur) but that’s not what I mean…

[Sunny41]

thanks @liamdebeasi it worked for me!

[liamdebeasi]

Thanks for the follow up. As @cmer4 mentioned, handling blur/focus is a bit inconsistent across browsers (Safari/iOS typically adds additional restrictions around blur/focus).

I was able to reproduce the behavior you are describing. There is no setBlur or blur method on ion-input; however, we do expose the native input element which can be used to call the blur method. We typically recommend developers just use that method.

@ViewChild('ionInput', { static: true }) ionInput: ElementRef;
...

async blurInput() {
  const nativeInput = await this.ionInput.nativeElement.getInputElement();
  nativeInput.blur();
}

I tried this in your application, and it worked fine. I am going to close this issue. Thanks!