ngx-bootstrap: Popover with triggers="focus" not working on MacOs

On our projects and on your demo site, the popover with focus trigger doesn’t work on Safari and Firefox (MacOsx). But it works on Chrome (MacOsx).

The original popover bootstrap works but not ng2-bootstrap popover. https://www.quirksmode.org/dom/events/blurfocus.html

Firefox Mac and Safari and Chrome do not fire the events on radios and checkboxes if the user uses a mouse.

Within my test: On FF Mac, we can see the popover using tab key but not by clicking. On Safari, keyboard doesn’t work.

A js fix to be able to handle focus event on button: http://jsfiddle.net/kzfg0pdh/6/

Temporary fix

On component that directly use popover: Use this on HTML triggers="focus:blur" On ts ngAfterViewInit() { const sels: any = document.querySelectorAll('[triggers]'); for (let i = 0; i < sels.length; i++) { sels[i].addEventListener('click', function() { sels[i].focus(); }); } }

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 3
  • Comments: 15 (5 by maintainers)

Commits related to this issue

Most upvoted comments

interesting