0

This simple code

<button onclick="console.log(document.activeElement)">
  console.log(document.activeElement)
</button>

logs <button> in Chrome and Firefox, but Safari for some weird reason doesn't set focus on <button> and logs <body>

What's wrong with Safari? My expectation is that click on button should make it focused.

Safari version: 14.1.1 (latest) on macOS 11.4

Limon Monte
  • 52,539
  • 45
  • 182
  • 213

2 Answers2

0

While <button> is a focusable element, it doesn't get focus after clicking on it in Safari/Firefox on macOS:

enter image description here

This seems to be intentional behavior and won't be changed. Read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
-1

There's info on the mdn page about active elements that reads:

Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.

This means that on safari, your button probably doesn't qualify as something that can become an .activeElement.

This question goes into more detail about your issue:

document.ActiveElement not returning the active element in Safari

N8Javascript
  • 140
  • 10
  • ` – Limon Monte May 30 '21 at 13:47
  • Did you read the question I linked? It shows that on safari, button doesn't qualify as being focusable. The MDN page also says that elements that aren't "text input" elements aren't focusable on macOS systems - and buttons aren't that. Here's a link to another question that showed how to solve the issue: https://stackoverflow.com/questions/42758815/safari-focus-event-doesnt-work-on-button-element – N8Javascript May 30 '21 at 13:49
  • ` – Limon Monte May 30 '21 at 13:55
  • Again, it's focusable on many browsers and systems. Not on firefox/Safari on Mac. The link above shows how to resolve this - just detect a click on the button and use `.focus()` (if it can be focused). This link over here: https://bugs.webkit.org/show_bug.cgi?id=13724 shows that buttons on MacOS AREN'T focusable - and that's intentional. I don't know what more you need to prove it to you. – N8Javascript May 30 '21 at 14:00