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...

Answer 1

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

1. the mouse need to be on that element when the clicking begins.
2. 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/