ionFocus vs focus

Ionic Framework ionic-v3
1

Team,

I ran into an issue today while working on some form validations. I tried async validation but realized it may be flawed in the sense that it makes numerous request to the backend services even when debounce is used. I had to drop it for that reason and also because my use case does not require an input field to throwing errors when the user is still typing information. I know this issue has been discussed here at great length so I will not duel on it.

My issue is this message: (focus) is deprecated in ion-input, use (ionFocus) instead. The challenge here is that for some reason ionFocus does not expose target and relatedTarget properties. In my Directive implementation, I have the following:

Note: This has been simplified to keep the problem succinct.

@HostListener('ionFocus', ['$event.target'])
onFocus(target) {
     console.log(target);
}

Prints out undefined irrespective of whether the event is a FocusEvent or not whereas the below code prints out the content of target.

@HostListener('focus', ['$event.target'])
onFocus(target) {
     console.log(target);
}

I am current using the following dependencies and their respective versions. Please let me know if I am missing something, thanks in advance.

 "dependencies": {
        "@angular/animations": "4.2.3",
        "@angular/common": "4.2.3",
        "@angular/compiler": "4.2.3",
        "@angular/compiler-cli": "4.2.3",
        "@angular/core": "4.2.3",
        "@angular/forms": "4.2.3",
        "@angular/http": "4.2.3",
        "@angular/platform-browser": "4.2.3",
        "@angular/platform-browser-dynamic": "4.2.3",
        "@angular/platform-server": "4.2.3",
        "@ionic-native/core": "^3.12.1",
        "@ionic-native/geolocation": "^3.12.1",
        "@ionic-native/network": "^3.10.3",
        "@ionic-native/splash-screen": "^3.12.1",
        "@ionic-native/status-bar": "^3.12.1",
        "@ionic/storage": "^2.0.1",
        "@types/google-maps": "^3.2.0",
        "@types/googlemaps": "^3.26.14",
        "angular2-jwt": "^0.2.3",
        "angular2-text-mask": "^8.0.1",
        "cordova-browser": "^4.1.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-network-information": "^1.3.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-stripe": "^1.4.1",
        "cordova-plugin-whitelist": "^1.3.2",
        "graceful-fs": "^4.1.11",
        "ionic-angular": "^3.4.2",
        "ionic-plugin-keyboard": "2.2.1",
        "ionic2-custom-icons": "^0.4.1",
        "ionicons": "^3.0.0",
        "ng2-translate": "^5.0.0",
        "node-js-marker-clusterer": "^1.0.0",
        "rxjs": "^5.4.1",
        "sw-toolbox": "3.4.0",
        "text-mask-addons": "^3.5.1",
        "typescript": "*",
        "typescript-collections": "^1.2.3",
        "zone.js": "^0.8.12"
    },
4 Likes
2

Same problem here, and I am not able to find a solution. Have you already opened an issue in Github?

3

You can try this:

var target = $event._native.nativeElement;

Or:

@HostListener('ionFocus', ['$event._native.nativeElement'])
onFocus(target) {
     console.log(target);
}
1 Like