fix(evo-tooltip): open on click in browsers that do not focus buttons on click - #884
Conversation
… on click Safari and macOS Firefox do not give buttons focus on click, and the tooltip only opens on focusin, so a noHover tooltip with a button host could not be opened with a pointer. The host now focuses itself on click, composing with any consumer-provided onClick. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 17d5c46 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
This PR updates evo-tooltip (Marko) so noHover tooltips can open on mouse click in browsers that don’t automatically focus <button> elements on click (notably Safari and macOS Firefox). It does this by focusing the tooltip host within the click handler while preserving any consumer-provided onClick, and adds the component’s first browser tests plus a patch changeset.
Changes:
- Compose a host
onClickhandler that callsel.focus()before invoking any consumer-providedonClick. - Add new browser tests (and a fixture) validating open-on-click and close-on-blur behavior for a button host.
- Add a patch changeset for
@evo-web/marko.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/evo-marko/src/tags/evo-tooltip/index.marko | Focus host on click and compose with consumer onClick to ensure click opens the tooltip in non-focus-on-click browsers. |
| packages/evo-marko/src/tags/evo-tooltip/test/test.browser.ts | New browser tests for open-on-click and close-on-blur behavior. |
| packages/evo-marko/src/tags/evo-tooltip/test/fixtures/button-host.marko | New fixture rendering a noHover tooltip with a button host and optional click handler. |
| .changeset/tall-tooltips-focus.md | Patch changeset documenting the Safari/macOS Firefox behavior fix. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| export interface Input { | ||
| onHostClick?: Marko.HTML.Span["onClick"]; | ||
| } |
|
|
||
| afterEach(cleanup); | ||
|
|
||
| const settle = () => new Promise((resolve) => setTimeout(resolve, 50)); |
HenriqueLimas
left a comment
HenriqueLimas
left a comment
There was a problem hiding this comment.
Not sure we want this behavior for clicks of buttons. Reason is that after clicking the button its too late to see the tooltip IMO.
PR Preview DeployedWebsite • commit 17d5c46 |
I think it depends on the purpose of the button! If the result is a reversible action then it is still useful to see the button's tooltip. This change irons out an inconsistency between browsers. Only Safari doesn't trigger a focus event on button click, so the tooltip opens everywhere else. I think it's worth it to make all browsers behave the same. |
|
What if Safari is the correct approach? Other libraries like react-aria or base-ui, they both show the tooltip only on focus if hover is disabled. If we consider this sentence from our MIND patterns:
Showing it on click its not at the right time IMO, its too late already and unecessary. If we consider safari is the correct approach, we need to detect |
evo-tooltipopens onfocusin, but Safari and macOS Firefox do not give buttons focus on click — so anoHovertooltip with a button host could only be opened with the keyboard. The host element now focuses itself on click (a no-op where click already focuses), composing with any consumer-providedonClick. Adds the component's first browser tests, using programmatic clicks to reproduce the no-focus-on-click behavior, plus a changeset.🤖 Generated with Claude Code