How to specify the order of a focusout and a click event?

Question

I have an input field with a JS focusout event. Under my input field, I have an autocomplete popup with suggestions. But when I click on a suggestion, it’s playing the focusout before the event listener on the click of the autocomplete! Any clues on how I can I fix this conflict?

Picture of the input and its autocompletion:

The click event:

resultsFrom.addEventListener('click', (event) => {
  let e;
    e = event.target.parentNode;
  inputFrom.value = e.getAttribute('data-display');
});

The focusout event:

inputFrom.addEventListener('focusout', () => {
  const list = document.querySelector('#results-from');
  let first = list.firstChild;
  inputFrom.value = first.getAttribute('data-display');
  resultsFrom.innerHTML = '';
});

try `event.stopPropagation()` in the `click` event. Or add some variable as flag (e.g. `var clicked = false`) and set it to true in `click` event and in `focusout` check if variable is true or false. And then set to false. — Krzysztof Janiszewski, May 14 '18 at 09:28
@KrzysztofJaniszewski That probably won't work, since the two are separate events. `stopPropagation()` stops the event from bubbling up the DOM tree — Máté Safranka, May 14 '18 at 09:30

score 3 · Accepted Answer · answered May 14 '18 at 09:42

3

The focusout event has a property on the event object of relatedTarget - this is the element that's going to gain the focus, in this case, it will be the element you're clicking on.

You need to check if that element is within your results, and not clear them out if that's the case. Something like this:

inputFrom.addEventListener('focusout', (e) => {
  const list = document.querySelector('#results-from');
  if (!list.contains(e.relatedTarget)) {
    //the target is not in the list, continue as before
    //otherwise allow the click to function by not clearing out resultsFrom
    let first = list.firstChild;
    inputFrom.value = first.getAttribute('data-display');
    resultsFrom.innerHTML = '';
  }
});

answered May 14 '18 at 09:42

James Thorpe

31,411
5
72
93

Thanks for your answer. I tried to implement the relatedTarget but it doesn't work yet. When I put a console.log(e.relatedTarget); over the `if (!list.contains(e.relatedTarget)) {...}` it indicates null every time the focusout happens. What did I do wrong ? – Bonapara May 14 '18 at 10:27
I think perhaps you must be using an element that can't gain the focus - what do you use for your results? Perhaps they need to be `` tags so they can get the focus when clicked on. – James Thorpe May 14 '18 at 10:30
They are `
...

Bonapara

May 14 '18 at 10:38

Ok - check out [this related answer](https://stackoverflow.com/a/42764495/791010) then - in addition to my answer above, you need to make it so the elements you're clicking on can gain focus. Either by using an element that can receive focus by default, or that answer suggests that adding `tabindex="0"` to your `

`s should also work.

– James Thorpe May 14 '18 at 10:40

How to specify the order of a focusout and a click event?

1 Answers1