Click on OverlayTrigger with "focus" trigger does not work on Firefox

react-bootstrap / react-bootstrap

Bootstrap components built with React

https://react-bootstrap.github.io/

MIT License

22.4k stars 3.6k forks source link

Click on OverlayTrigger with "focus" trigger does not work on Firefox #3185

Open sikrob opened 6 years ago

sikrob commented 6 years ago

Issue found against Firefox version 61.0 (64-bit), plus a couple versions previous.

You can reproduce this issue by testing against the examples page for popovers: https://react-bootstrap.github.io/components/popovers/

"click" and "hover" seem to work fine, only "focus" is failing to trigger popovers.

aqualad commented 6 years ago

Can confirm that using trigger="focus" broke my popover in Firefox 57.0.4 (64-bit Mac) and 62.0.3 (64-bit Mac). The only way I found to get focus on the button was by using the tab key. In Chrome ( 69.0.3497.100), I could still click to activate the popover.

Removing trigger="focus" seems to default to trigger="hover" behavior on both browsers

aabhas commented 5 years ago

I am experiencing this issue as well. Weirdly, clicking tab key does trigger the popover component.

juan0087 commented 4 years ago

Having the same issue with Chrome Version 80.0.3987.132 (Official Build) (64-bit). Click and Hover work, but when set to trigger="focus" is does not trigger the popover.

This was working fine a few weeks back, but all of a sudden they no longer trigger.

Has anyone found aa solution yet?

kosmiq commented 4 years ago

I tested this as well.

Chrome Version 80.0.3987.132 (Official Build) (64-bit) on MacOS I get the :focus version to work if I tab to it, but not if I set :focus in devtools.
With Firefox 73.0.1 (64-bit) it is broken regardless of if I tab my way to it or set :focus using the devtools.
After updating to Firefox 74.0 (64-bit) it seems to be working when I tab to it, but not when I set :focus.
Safari is broken either way and I seem unable to even tab around the page honestly.

kuldeepk commented 3 years ago

This looks like a Firefox and Safari issue where onFocus event doesn't get fired for buttons. You can test it here - https://jsfiddle.net/Lqype8sg/1/ (works in Chrome but not in FF or Safari). I fixed it by adding an onClick event which manually focuses the element,

<OverlayTrigger trigger={["focus"]} overlay={...}>
  <Button onClick={(e) => {e.target.focus()}}>
     title
  </Button>
</OverlayTrigger>