Why Blur And Focus Doesn't Work On Safari?

- 1 answer

I have simple button like that:

<button class="emoji-button-container" onblur="APP.hideEmojiContainer()" onclick="APP.toggleEmojiContainer()">

On Chrome both event works perfectly.

On Safari onclick event works without any problem, but onblur event doesn't get triggered. Also element.blur() function doesn't trigger onblur event. I need it to work on Safari just like on Chrome, so what can I do? what's problem here?



It seems Safari doesn't focus button element on click. So, according to definition, onblur attribute fires the moment that the element loses focus. Element is not focused => onblur doesn't fire.

One of the solution could be manually apply button.focus() after click.

Another one is to attach click event on document as here