Ionic-framework: $event.target is unavailable from the (ionBlur) event

Created on 5 Jul 2017 · 9Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
$event.target is undefined since i have changed the (blur) deprecated event by (ionBlur) event in my template
Expected behavior:
$event.target property should be available

Steps to reproduce:

Related code:

<ion-input (blur)="onBlur($event)"></ion-input>

Source

youssmak

👍1

Most helpful comment

The event type change from blur to ionBlur for ion-input seems to have resulted in the $event value passed from the template changing from the native event object to an Ionic TextInput.

I still found a way to access the blur event target but it's probably not the wisest approach.

Old way with blur:

<ion-input (blur)="onChange($event)">

onChange(event: FocusEvent) {
  const eventTarget = event.target;
}

New way with ionBlur:

<ion-input (ionBlur)="onChange($event)">

onChange(textInput: TextInput) {
  const eventTarget = textInput._native.nativeElement;
}

In the ionBlur scenario, the _native property is labeled with a @hidden comment and it's excluded from the docs, so it's probably not considered part of the public API contract.

Would appreciate guidance on a recommended way to access the blur event target! 😃

Thank you!

KevinKelchen on 24 Nov 2017

👍5

All 9 comments

Thanks for using Ionic, we will look into this.

jgw96 on 5 Jul 2017

👍3

Same issue with 3.6.0. Please fix!

playuntildark on 6 Aug 2017

👍1

Same issue with ionFocus and ionic-angular version 3.6.1

jcviau on 25 Sep 2017

Still an issue with 3.19.0

leegee on 24 Nov 2017

The event type change from blur to ionBlur for ion-input seems to have resulted in the $event value passed from the template changing from the native event object to an Ionic TextInput.

I still found a way to access the blur event target but it's probably not the wisest approach.

Old way with blur:

<ion-input (blur)="onChange($event)">

onChange(event: FocusEvent) {
  const eventTarget = event.target;
}

New way with ionBlur:

<ion-input (ionBlur)="onChange($event)">

onChange(textInput: TextInput) {
  const eventTarget = textInput._native.nativeElement;
}

In the ionBlur scenario, the _native property is labeled with a @hidden comment and it's excluded from the docs, so it's probably not considered part of the public API contract.

Would appreciate guidance on a recommended way to access the blur event target! 😃

Thank you!

KevinKelchen on 24 Nov 2017

👍5

If you want to use $event.target.select() to select all input text, this way will not work in device.
Instead of it, try something like this:

https://gist.github.com/tperrelli/fd17c2fe95c8b17b460b15e80687f9f6

tperrelli on 12 Apr 2018

Hi,

Just use the event on scope inside the callback

<ion-input (ionBlur)="onChange(some.data)">

onChange(data) { const eventTarget = event.target; }

diegovallarta on 8 Aug 2018

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!