react-powerplug
react-powerplug copied to clipboard
renatorib
FocusManager fails with buttons in safari and firefox
We need to find some solution to work around it both safari and firefox
Ref https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
Example
<html>
<body>
<button tabindex="-1">Click me</button>
<script>
const button = document.querySelector("button")
// focus event is fixed with custom firing
button.addEventListener("mousedown", event => {
if (event.currentTarget.tagName === 'BUTTON') {
event.currentTarget.focus();
}
});
button.addEventListener("focus", () => {
console.log("focus");
});
// sadly blur is fired straight after focus
button.addEventListener("blur", () => {
console.log('blur');
})
</script>
</body>
</html>
/cc @souporserious
I like the idea of using onMouseUp and event.preventDefault. Maybe we can try that for now and see if anything weird comes up? I can't think of anything off the top of my head that using onMouseUp would break 🤔.
onMouseUp doesn't work for me. I came to this solution after discussion with you
button.addEventListener('mousedown', event => {
if (event.currentTarget.tagName === 'BUTTON') {
event.preventDefault();
event.currentTarget.focus();
}
})
button.addEventListener('focus', () => {
console.log('focus');
});
button.addEventListener('blur', () => {
console.log('blur')
})
Here's reproducing example. The problem now is iphone. My friend said blur doesn't work. After clicking at button test became focused and then nothing happend after clicking to whitespace.
https://codesandbox.io/s/ppy6kv0w67
I don't have iphone to test. @souporserious could you take a look?
I had a little bit of time to look at this, but I'm not sure the best route to fix this 😞. I was able to get it working by listening to touchstart then removing it on blur, but it feels super gross 🤮.
https://codesandbox.io/s/j2jx97422v
Yep, looks not the best. Even pointer events are not supported by safari :(
@souporserious What if we will add cursor: pointer to documentElement or body on mouse down? At least for safari.
Hmm not sure what you mean by cursor: pointer 🤔. Are you talking about styling?
Yes, style="cursor: pointer" on html or body could enable clickability and probably blur.
Oh interesting! I didn't know Safari would catch clicks if you add cursor: pointer. I'll try and investigate more when I get some time.