Skip to content

Conversation

matthewlipski
Copy link
Collaborator

@matthewlipski matthewlipski commented Mar 3, 2024

Apparently, buttons are not focused on click in Safari (https://stackoverflow.com/questions/61245883/why-blur-and-focus-doesnt-work-on-safari). Since we use a blur event handler to hide the formatting toolbar sometimes, this wasn't working which caused the link button and block type dropdown to close the formatting toolbar on click. This PR forces toolbar buttons to become focused on mouse down, which fixes the issue. Doesn't seem to be a problem for other UI elements.

closes #530

Copy link

vercel bot commented Mar 3, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote ❌ Failed (Inspect) Mar 4, 2024 1:34pm
blocknote-website ✅ Ready (Inspect) Visit Preview Mar 4, 2024 1:34pm

@matthewlipski matthewlipski changed the base branch from main to refactor/playground-nextjs March 3, 2024 14:44
// Needed as Safari doesn't focus button elements on mouse down
// unlike other browsers.
onMouseDown={() => {
if (buttonRef.current !== null) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice find!

I think you can get the element from the event (first argument of event handler). That way we don't need the ref / hacks and the code gets more succint

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants