Setting Focus to an Input in Ionic

Ionic Framework ionic-v3
17

Hello everyone!
I don’t know if any of you had this issue but after updating my project to Ionic 3.5.0 it seems like the focus and blur events are deprecated in ion-input.
these are the messages logged: “(focus) is deprecated in ion-input, use (ionFocus) instead” the same for blur.
I have a directive that makes use of the blur event so I can format the input values before send them to the server. I wouldn’t want to go input by input setting the ionBlur handler (my app is full of forms).

Does any of you would know how i could implement the ionBlur in my directive?

import { Directive, HostListener, ElementRef, Attribute} from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
	selector:'[inputFormat]'
})
export class InputFormat{
	elem:HTMLInputElement;

	constructor(
		public elRef:ElementRef, 
		public control:NgControl,
		@Attribute('inputFormat') public inputFormat:string){
		this.elem = elRef.nativeElement;
	}

	capitalize(input:String){
		let preps = ['de', 'di', 'do', 'da', 'dos', 'das', 'dello', 'della', 'dalla', 'dal', 'del', 'e', 'em', 'na', 'no', 'nas', 'nos', 'van', 'von', 'y'];
	    let str = input.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
	        return p1 + p2.toUpperCase();
	    });
	    //console.log(str);
	    let arr = str.split(" ");
	    //console.log(arr);	    
	    for(let i = 0; i<arr.length; i++){
	        let istr = arr[i];
	        for(let j in preps){
	            if(istr.toLowerCase() == preps[j]){
	                arr[i] = preps[j];
	            }
	        }
	    }	    
	    str = arr.join(' ');
	    return str;
	}

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

	@HostListener('blur', ['$event.target.value'])
	onBlur(value){
		if(value != undefined && value != ''){		
			if(this.inputFormat == 'lowercase'){
				this.control.control.setValue(value.toLowerCase());
			}
			else if(this.inputFormat == 'uppercase'){
				this.control.control.setValue(value.toUpperCase());
			}
			else if(this.inputFormat == 'capitalize'){
				let val = this.capitalize(value.toLowerCase());
				this.control.control.setValue(val);
			}
		}		
	}
	
}

My system infos:

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : ios 4.3.1
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.5.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.1 Build version 8B62 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 3.10.3

thanks a lot!!

1 Like