Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur event on ion-input is not fired #5487

Closed
xkjyeah opened this issue Feb 17, 2016 · 11 comments
Closed

Blur event on ion-input is not fired #5487

xkjyeah opened this issue Feb 17, 2016 · 11 comments
Assignees
Milestone

Comments

@xkjyeah
Copy link

xkjyeah commented Feb 17, 2016

<ion-input type="text" (blur)="eventHandler()"> does not fire the eventHandler on blur.

Blur and other events should be bubbled to the parent container to allow for more complex interactions

@adamdbradley
Copy link
Contributor

Is this in Ionic1 or Ionic2?

@xkjyeah
Copy link
Author

xkjyeah commented Feb 18, 2016

Ionic2.
On Feb 18, 2016 23:09, "Adam Bradley" notifications@github.com wrote:

Is this in Ionic1 or Ionic2?


Reply to this email directly or view it on GitHub
#5487 (comment).

@prolink007
Copy link

Here is a current work around for "blur".

Use "focusout" or "mouseleave". Those are both working.

@brandyscarney
Copy link
Member

So the reason these events aren't working for ion-input is because the blur and focus events do not bubble up from the native input, see: blur & focus.

We are now emitting these events from the ion-input. This should be fixed in the next release (beta.4), thanks!

@Gp2mv3
Copy link

Gp2mv3 commented Mar 3, 2017

Are you sure this issue is closed ? I have the same bug in 2.1.0.

This line doesn't fire the function:
<ion-input type="datetime-local" formControlName="begin" (blur)="updateEndDate($event)"></ion-input>

But this one does:
<ion-input type="datetime-local" formControlName="begin" (focusout)="updateEndDate($event)"></ion-input>

Tested on Chrome.

@brandyscarney
Copy link
Member

@Gp2mv3 I'm not seeing any issues using either type="text" or type="datetime-local". Could you see if changing the type does anything? What element are you clicking on to blur to it?

@sharonswli
Copy link

sharonswli commented Jul 6, 2017

@brandyscarney I'm using ionic-angular 3.5.0, and can confirm that neither (blur) nor (focus) events are fired properly still.

(focusout) does work though, even the docs state clearly that (blur) and (focus) are the appropriate events.

What worked for me:
<ion-input type="text" formControlName="answer" (focusout)="onBlur()"></ion-input>

@Smoke1987
Copy link

<ion-input [type]=" !showPassword ? 'password' : 'text' "> when I try to change the showPassword by pressing the button <button (tap)="showPassword = !showPassword; $event.preventDefault()"> ion-input loses focus, respectively, the keyboard disappears on the device. Using <ion-input (focusout)="$event.preventDefault()"> does not help. Somebody has speculation why?

@biranchi2018
Copy link

This worked for me.
<ion-input type="text" (ionBlur)="onBlur()">

@Corona17
Copy link

Corona17 commented Mar 7, 2018

How to blur an ion-input programmatically?

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 1, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants