Skip to content

fix: Safari toolbar buttons & dropdowns - #599

Merged
YousefED merged 3 commits into
refactor/playground-nextjsfrom
safari-toolbar-click-fix
Mar 4, 2024
Merged

fix: Safari toolbar buttons & dropdowns#599
YousefED merged 3 commits into
refactor/playground-nextjsfrom
safari-toolbar-click-fix

Conversation

@matthewlipski

@matthewlipski matthewlipski commented Mar 3, 2024

Copy link
Copy Markdown
Collaborator

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

@vercel

vercel Bot commented Mar 3, 2024

Copy link
Copy Markdown

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
Copy Markdown
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