Aurelia event firing order

Question

I am creating a custom template with a searchable select. There is focus (trigger), blur (trigger), keyup (delegate) and value (bind) bindings on the input element. The dropdown content is displayed in a div, inside the same div as this input. the dropdown is showing when focus is on the input box, but when I click one of the elements in my custom dropdown, the blur event fires before the click delegate would fire, and as such, i don't get a call to the selectThis() method.

Template looks like this:

<template>
<require from="../searchabledropdown/searchabledropdown.css"></require>
<div class="dropdown">
    <input type="text" 
           placeholder="Search.." 
           id="inputSearchField" 
           value.bind="searchValue"
           keyup.delegate="findData()"
           focus.trigger="changeVisibility(true)"
           blur.trigger="changeVisibility(false)">
    <div if.bind="visible" class="dropdown-content">
        <a href="${'#' + option.thingId}" click.delegate="selectThis(option.thingId)" repeat.for="option of thingimabobs">${option.textValue}</a>
    </div>
</div>

How can i get the click element to fire first, without hacking it with timeouts and stuff...? - I have tried setting the blur.trigger on the div that contains the class="dropdown", but it won't trigger at all then...

Any reason to be using `trigger` over `delegate` here? You should [use delegate except when you cannot use delegate](https://stackoverflow.com/questions/33904248/aurelia-delegate-vs-trigger-how-do-you-know-when-to-use-delegate-or-trigger) — Jesse, Oct 08 '18 at 06:50
If I'm assuming your desired functionality correctly, isn't it easier to show the dropdown after x amount of characters have been entered in the input field, instead of whenever the input field is focused? — Jesse, Oct 08 '18 at 06:54
@JessedeBruijne: as i have understood, you cannot use delegate on focus and blur. And opening the dropdown list is not the problem.. it's closing it at correct times that is my issue.. it opens just fine :) — Bjørn, Oct 08 '18 at 07:35

score 4 · Accepted Answer · answered Oct 08 '18 at 22:18

for the click event to fire for an element 2 things need to happen.

the mouse need to be on that element when the clicking begins.
the mouse need to be on that element when the clicking end.

you can notice that by starting a click on an element, then moving the mouse away from the element while clicking - and releasing the mouse outside the element. in this case the click event will not fire.

but if you started the click on the element, and then - while holding the mouse - you stepped out - but stepped in again and then released the mouse - then the click event will fire.

in your case - the second requirement is never met - because by the time you release the mouse - the blur event already fired and make your element go away - so your element is not catching the release of the mouse.

TL;DR

just change your event from click to mousedown - then your code will fire immediately when you click on the element.

http://codingrepo.com/javascript/2017/05/19/javascript-difference-mousedown-mouseup-click-events/

Thanks man! :D Very logical when I just get it :) Also really appreciate the elaborate explanation.. never stop giving those! :) — Bjørn, Oct 11 '18 at 08:28

Aurelia event firing order

1 Answers1