ionBlur Event: Detect the element that is receiving the focus

Issue

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:

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

Solution

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

Answered By - Alex Shesterov