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
- Popover focus on Mac OS fix https://github.com/valor-software/ngx-bootstrap/issues/1795 — committed to gilsdav/ngx-bootstrap by gilsdav 7 years ago
- Popover focus on Mac OS fix reident https://github.com/valor-software/ngx-bootstrap/issues/1795 — committed to gilsdav/ngx-bootstrap by gilsdav 7 years ago
- fix(popover): no focus on button on Mac OS #1795 (#2031) fixes #1795 — committed to valor-software/ngx-bootstrap by gilsdav 7 years ago
- Merge pull request #18 from valor-software/development fix(popover): no focus on button on Mac OS #1795 (#2031) — committed to GulajavaMinistudio/ngx-bootstrap by GulajavaMinistudio 7 years ago
interesting