2

From a custom directive, I want to determine what is the element that is receiving the focus when a blur event occurs:

@Directive({
  selector: '[my-directive]',
  host: {
    //...
    '(ionBlur)': 'onBlur($event)'
  }
})
export class MyCustomDirective implements OnInit {
    //...
    onBlur($event) {
        console.log(event) // This logs a CustomEvent that contains information only about the element that losing the focus
        console.log(event.relatedTarget) // This logs undefined
    }
    //...
}

I am using this directive with an ion-input element:

<ion-input my-directive></ion-input>

When testing, the event parameter of the onBlur method contains the attributes target and currentTarget which both are the element that is losing the focus, but the event.relatedTarget was undefined:

enter image description here

Is it possible to have the element that is receiving the focus too?

Strider
  • 3,539
  • 5
  • 32
  • 60
  • Maybe the `relatedTarget` property is what you are looking for (see [this answer](https://stackoverflow.com/a/33325953/1009922)). – ConnorsFan Feb 02 '19 at 01:52
  • Thanks for your proposition. Unfortunately the result of `event.relatedTarget` was undefined. I edited my question to mention it – Strider Feb 02 '19 at 11:10

3 Answers3

1

Ionic 5.3 finally added this feature.

You can now access the element which is gaining focus via ionBlurEvent.detail.relatedTarget.

Note that ionBlurEvent.detail contains the "original" HTML FocusEvent.

Note also that the FocusEvent.relatedTarget may still be null — in case that no "focusable" element receives focus. See also: blur event.relatedTarget returns null

Alex Shesterov
  • 26,085
  • 12
  • 82
  • 103
0

First of all, you will need a Hostlistener to watch for blur events. And when you catch blur event with a HostListener:

  @HostListener('ionBlur', ['$event'])
  onBlur($event: FocusEvent) {
    console.log(event)
  }

You can see relatedTarget is available

enter image description here But 

    console.log(event.relatedTaget)

will give a compiler error.

As it's a JSON structure, to get it, I suggest this:

console.log(event['relatedTarget'])

then you will get this:

enter image description here

Demo

Vega
  • 27,856
  • 27
  • 95
  • 103
  • I think that the `blur` event isn't taken into account as it is not fired when the element loses the focus. In my Ionic app, I need to use the `ionBlur` event, and as I mentioned in my question, the `$event` param is an instance of `CustomEvent` and the `relatedTarget` attribute does not even exist. I will edit my question to add a screen capture of the logged event – Strider Feb 02 '19 at 21:03
  • Thanks for the example. Unfortunately the `blur` event isn't fired when I am using an `ion-input` element instead of on `input` element. The only event that is fired when losing focus from an `ion-input` is `ionBlur`, and when using it, the `relatedTarget` attribute is undefined – Strider Feb 03 '19 at 22:32
  • Thank you again for the updated example :) I followed the same code in my app but it is still not working. The difference that I am noticing between your stackblitz example and my app, is that I am using the version 4.0.0 of ionic-angular, while the version used in the example is 3.9.2 – Strider Feb 04 '19 at 13:05
  • Isn't the latest ionic-angular version 3.9.3 ? https://www.npmjs.com/package/ionic-angular – Vega Feb 04 '19 at 13:41
  • My bad, instead of ionic-angular, 4.0.0 is associated to @ionic/angular: https://www.npmjs.com/package/@ionic/angular – Strider Feb 04 '19 at 14:43
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187881/discussion-between-strider-and-vega). – Strider Feb 04 '19 at 18:46
0

I am using Ionic 4, and for me what worked best:

onFocusLostEvent() {
    let input = event['target'] as HTMLElement;
    console.log(input.id); // the id of the ion-input object for its identification
}
Ualter Jr.
  • 2,320
  • 1
  • 25
  • 28