Safari: focus event doesn't work on button element
Solution 1
This might fix the issue: https://stackoverflow.com/a/1269767/2731261
$(".btn").mouseup(function(e){
e.preventDefault();
});
Solution 2
Documentation tells is not supported: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
Solution 3
Why does the focus event haven't triggered on click ?
We found through research that Safari and FireFox on Macs do not set focus on buttons when you click on them.
The way we fixed that was to add a click listener to our buttons and call focus() on the button that was clicked.
In Angular it looked like this:
<button (click)="myClickFunction(); $event.target.focus();>My Button</button>
Solution 4
See https://bugs.webkit.org/show_bug.cgi?id=13724
This is working as intended on MacOS. Clicking a button, radio button, or checkbox doesn't give the element focus- thus it can't lose focus and trigger a blur.
The solution is to give it a click event that gives the element focus.
Solution 5
Angular 8+ solution:
- in your button tag add #toggleButton and (click)="onClick(); $event.stopPropagation()"
exp:
<button #toggleButton type="button"
(click)="onClick(); $event.stopPropagation()"></button>
- in your component.ts add ==>before constructor
*** @ViewChild('toggleButton', { static: true }) toggleButton: ElementRef;
onclick(){
this.toggleButton.nativeElement.focus();
}
Comments
-
Woody almost 2 years
The focus event works fine on all browsers but Safari when it has been clicked.
And it works fine on div[tabindex] element, but don't work on button or input:button element.
It also can get the focus event when I use $('.btn').focus().
Why does the focus event haven't triggered on click ?
Here is my code:
$(".btn").focus(function (e) { $(".result").append("<p>Event:"+e.type+", target:"+e.target+"</p>"); })
.result{min-height:200px;border:1px solid #000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="btn">button 1</button> <input type="button" class="btn" value="button 2"/> <div class="btn" tabindex="0">div element</div> <h1> Result: </h1> <div class="result"> </div>
-
Woody about 7 yearsI think that sames like not the same issue. It only reproduce on Safari. What I want is get the focus event on the button when clicked.
-
ken about 7 yearsWell I just found this documentation basically saying Safari does not focus the button after click: developer.mozilla.org/en-US/docs/Web/HTML/Element/…
-
Manuel almost 2 yearsOld but gold. Thanks. For my particular case, I just changed my button element to div and set its tabindex attribute accordingly (tabindex="1" for me).