Search code examples
javascripthtmlcssmacossafari

Why blur and focus doesn't work on Safari?

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?

Solution

  • 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