Menu
I've got a simple issue but I can't seem to figure out any solution.
Basically I've got an input that toggles a dropdown when focused, and when it's not focused anymore it should close the dropdown.
However, the problem is that if you click on an item in the dropdown, the blur function is executed before the click function of the item, causing the click function not to run at all since the dropdown closes before the click is registered.
How can I solve this?
<input onFocus="showDropdown()" onBlur="hideDropdown()"> <ul> <li onClick="myClickFunc()">item</li> </ul> 
814
Show activity on this post. It looks like click event has lower priority than blur, so it is predictible behaviour that blur event fires first.
In browsers, pressing the tab key when a control has focus will move it to the next element in the tab order, causing the current element to lose focus and dispatch a blur event.
blur() method removes keyboard focus from the current element.
Note : In jQuery blur( handler ) method is used to bind an event handler to the "blur" JavaScript event, or trigger that event on an element. It has the following parameter : handler : A function to execute each time the event is triggered.
Replace your click event with (mousedown). Mousedown event is called before blur. This code should works properly:
<input (focus)="showDropdown()" (blur)="myBlurFunc()"> <ul> <li *ngFor="let item of dropdown" (mousedown)="myClickFunc()">{{item.label}}</li> </ul> It looks like click event has lower priority than blur, so it is predictible behaviour that blur event fires first.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
