Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FocusManager fails with buttons in safari and firefox #138

Open
TrySound opened this issue Jul 16, 2018 · 10 comments
Open

FocusManager fails with buttons in safari and firefox #138

TrySound opened this issue Jul 16, 2018 · 10 comments

Comments

@TrySound
Copy link
Collaborator

TrySound commented Jul 16, 2018 •
edited

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
@souporserious
Copy link
Collaborator

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 🤔.

@TrySound
Copy link
Collaborator Author

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')
})

@TrySound
Copy link
Collaborator Author

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?

@souporserious
Copy link
Collaborator

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

@TrySound
Copy link
Collaborator Author

Yep, looks not the best. Even pointer events are not supported by safari :(

@TrySound
Copy link
Collaborator Author

TrySound commented Jul 17, 2018 •
edited

@souporserious What if we will add cursor: pointer to documentElement or body on mouse down? At least for safari.

@souporserious
Copy link
Collaborator

Hmm not sure what you mean by cursor: pointer 🤔. Are you talking about styling?

@TrySound
Copy link
Collaborator Author

Yes, style="cursor: pointer" on html or body could enable clickability and probably blur.

@souporserious
Copy link
Collaborator

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.

@TrySound
Copy link
Collaborator Author

It's just an idea. I'm not sure this will work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@souporserious @TrySound