Blur event for ion-input firing on focus

Ionic Framework ionic-v3
1

I have an ion-input element with a blur event. When I touch the element, and focus is given to the element, it fires the blur event. Is this normal?

<ion-item>
    <ion-label>Email</ion-label>
    <ion-input ngControl="email" type="email" (blur)="displayData($event)"></ion-input>
</ion-item>

Has anybody else seen this? If so, is there a way to prevent this?

2

Maybe you have another ion-input with the blur event?

3

Hmm just tested this in a small demo, wasn’t able to recreate this. Similar to @xr0master, do you have another input also binding to blur?

1 Like
4

Not that I am aware of. It may have something to do with my data validators. I think I am just going to go back to using a standard <input> and do it that way.

5

Another oddity that I noticed was if I have a focus and a blur event on the element, it will fire both on the focus and the focus event fires twice. There are no other focus or blur events on the page. Here is the HTML for the page. The ‘email’ element is the only one with blur/focus events. I get a focus-blur-focus dumped out to the console.log. Any ideas what might be causing this? I even removed the validations, thinking that that might affect it.

<ion-content padding class="login-content">
    <form [ngFormModel]="dataForm" (submit)="false;">
        <div class="w100 tacenter hdr1" >{{ configData.appName }}</div>

        <!--  Logo -->
        <div class="mt10p w30 ml35">
            <img class="w100" src="img/graphics/hourglass-icon.png" align="middle" alt="Pencil Me In"/>
        </div>

        <!--  Buttons -->
        <div padding>
            <div class="lfloat w50"><button block outline id="login-button" (click)="login()">Login</button></div>
            <div class="lfloat w50"><button block outline id="create-account-button" (click)="createAccountRedirect()">Create Account</button></div>
            <br class="bclear"/>
        </div>

        <!--  Inputs -->
        <div class="login-input">
            <ion-list>
                <!--  Email -->
                <ion-item>
                    <ion-label>Email</ion-label>
                    <ion-input ngControl="email" id="email" (blur)="blurFunction($event)" (focus)="focusFunction($event)" type="email"></ion-input>
                </ion-item>

                <!--  Password -->
                <ion-item>
                    <ion-label>Password</ion-label>
                    <ion-input ngControl="password" type="password"></ion-input>
                </ion-item>
            </ion-list>
        </div>

        <!--  Forgotten Password -->
        <div class="mt50p action-text-default hdr5 tacenter" (click)="forgotPasswordRedirect()">Forgot Password</div>
    </form>
</ion-content>
6

What about use change event.

7

I created a PR for this while ago: https://github.com/ionic-team/ionic-plugin-keyboard/pull/290, until it’s merged I’m using my fork in my project.