Ionic-framework: Blur event on ion-input is not fired

[xkjyeah]

does not fire the eventHandler on blur.

Blur and other events should be bubbled to the parent container to allow for more complex interactions

[adamdbradley]

Is this in Ionic1 or Ionic2?

[xkjyeah]

Ionic2.
On Feb 18, 2016 23:09, "Adam Bradley" [email protected] wrote:

Is this in Ionic1 or Ionic2?

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/5487#issuecomment-185760995.

[prolink007]

Here is a current work around for "blur".

Use "focusout" or "mouseleave". Those are both working.

[brandyscarney]

So the reason these events aren't working for ion-input is because the blur and focus events do not bubble up from the native input, see: blur & focus.

We are now emitting these events from the ion-input. This should be fixed in the next release (beta.4), thanks!

[Gp2mv3]

Are you sure this issue is closed ? I have the same bug in 2.1.0.

This line doesn't fire the function:
<ion-input type="datetime-local" formControlName="begin" (blur)="updateEndDate($event)"></ion-input>

But this one does:
<ion-input type="datetime-local" formControlName="begin" (focusout)="updateEndDate($event)"></ion-input>

Tested on Chrome.

[brandyscarney]

@Gp2mv3 I'm not seeing any issues using either type="text" or type="datetime-local". Could you see if changing the type does anything? What element are you clicking on to blur to it?

[sharonswli]

@brandyscarney I'm using ionic-angular 3.5.0, and can confirm that neither (blur) nor (focus) events are fired properly still.

(focusout) does work though, even the docs state clearly that (blur) and (focus) are the appropriate events.

What worked for me:
<ion-input type="text" formControlName="answer" (focusout)="onBlur()"></ion-input>

[Smoke1987]

<ion-input [type]=" !showPassword ? 'password' : 'text' "> when I try to change the showPassword by pressing the button <button (tap)="showPassword = !showPassword; $event.preventDefault()"> ion-input loses focus, respectively, the keyboard disappears on the device. Using <ion-input (focusout)="$event.preventDefault()"> does not help. Somebody has speculation why?

[biranchi2018]

This worked for me.

[Corona17]

How to blur an ion-input programmatically?

[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.