Blur event do not triggered in FF for disabled control

[svoronuk]

Switch from disabled control, e.g. button to enabled control, do not remove focusing style from disabled control.

Steps:

1. Switch by using TAB to button element
2. Disable button
3. Switch by using TAB to enabled element, e.g. input

Result: Two elements marked like focused

DEMO: https://codesandbox.io/s/angry-lovelace-z8i6h?file=/src/index.js

[svoronuk]

I suggest this patch for the fixing the issue
firefox_blur_patch.zip

[robdodson]

Hi @svoronuk, I'm not sure if I'm correctly seeing the problem. Are you saying that if a button has focus, and it is disabled, and then you tab away it will still have focus-visible applied? It doesn't seem like the polyfill is running in your demo (I don't see the .focus-visible class appearing). Could you add it?

Also, would you mind posting your suggested fix as a github gist instead of a zip? http://gist.github.com/

[svanherk]

I'm still seeing this problem today. I created a simple setup that demonstrates it: https://jsbin.com/gijuyatohe/1/edit?html,css,js,output
If you open this in Chrome, tab to the button to apply the focus-visible styling (an orange background), and press enter, the button becomes disabled and the orange background is removed. If you do the same in Firefox, the orange background is not removed because the focus-visible class is not removed from the button upon becoming disabled.

[mcaskill]

This issue is still present in Firefox v120 with focus-visible v5.2.0.
The test case provided by @svanherk reproduces this issue.

[robdodson]

Hey @mcaskill, unfortunately we don't have any plans to update this polyfill (see the Support section of the README). Is it possible for you to migrate away from the polyfill? :focus-visible is supported in all browsers and has been in Firefox since v85