event.target.blur() not working

Question

I have a series of Bootstrap buttons like this:

<button :disabled="page === lastPage" type="button" class="btn btn-default" @click="getPage(lastPage)">
    <span class="glyphicon glyphicon-forward"></span>
</button>

But the first line of the getPage method does not work:

event.target.blur();

Which is very strange, because I have another button in another component, on which event.taget.blur() works perfectly:

<button class="btn btn-default pull-right" @click="show()" type="button">Batch
    <span :class="{'glyphicon glyphicon-chevron-down': showForm, 'glyphicon glyphicon-chevron-up': !showForm}"></span>
</button>

Does anyone know why this might be?

EDIT: I think it's when I click inside the SPAN that the blur doesn't work.

EDIT: oh well I solved it - I also need event.target.parentNode.blur() as well.

Answer 1

You likely want to use

event.currentTarget.blur()

That will always be the element you attached the event listener to where as event.target is the element the event originated from.

Answer 2

I would consider using

if (document.activeElement != document.body) {
    document.activeElement.blur()
}

rather than navigating through nodes as it is less prone to error if the mark up changes.

Answer 3

In this case, because the button contains a span, sometimes the user was clicking on the button itself, and sometimes on the span within. Hence, to reliably blur the button I needed:

event.target.blur();
event.target.parentNode.blur();