fix: open tooltip on click when anchor stops propagation

[danielbarion]

closes #1274

Summary by CodeRabbit

• Bug Fixes
  • Fixed tooltip opening behavior when click event propagation is stopped by the anchor element.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8267f9c7-e980-4135-b21e-83067d323c5e

📥 Commits

Reviewing files that changed from the base of the PR and between 3b275df and 10de8d0.

📒 Files selected for processing (3)

• src/components/Tooltip/event-delegation.ts
• src/components/Tooltip/use-tooltip-events.tsx
• src/test/tooltip-interaction-behavior.spec.js

---

📝 Walkthrough

Walkthrough

This PR enables tooltip click handlers to register in the capture phase of the DOM event flow, allowing them to receive click events before anchor elements can stop propagation. The event delegation infrastructure was refactored to support AddEventListenerOptions keying by (eventType, capture) pairs, and tooltip click handlers now explicitly register with capture: true.

Changes

Tooltip Capture-Phase Event Delegation

Layer / File(s)	Summary
Event delegation infrastructure with capture phase support src/components/Tooltip/event-delegation.ts	addDelegatedEventListener now accepts AddEventListenerOptions and keys delegated listeners by (eventType, capture) pairs instead of eventType alone. Each listener owns its dispatch closure and handlers set. Unsubscribe and resetEventDelegation updated to track and remove listeners using their stored dispatch function and capture flag.
Tooltip click event handlers registered in capture phase src/components/Tooltip/use-tooltip-events.tsx	Tooltip delegated event wrapper accepts and forwards AddEventListenerOptions to addDelegatedEventListener. Click-style open and close handlers now register with capture: true, allowing them to intercept click events in the capture phase before anchor-level stopPropagation can block them.
Test for tooltip open with stopPropagation src/test/tooltip-interaction-behavior.spec.js	Added test case validating that tooltips with openOnClick open when the anchor element calls event.stopPropagation(), confirming capture-phase interception works correctly.

Sequence Diagram

sequenceDiagram
  participant Browser
  participant TooltipDelegatedListener as Tooltip<br/>Capture Handler
  participant Anchor
  participant OtherHandlers as Other<br/>Handlers
  Browser->>TooltipDelegatedListener: 1. Click (capture phase)
  TooltipDelegatedListener->>TooltipDelegatedListener: Opens tooltip
  Browser->>Anchor: 2. Click (bubbling phase)
  Anchor->>Anchor: stopPropagation()
  Note over OtherHandlers: 3. Blocked by stopPropagation

Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested Reviewers

• gabrieljablonski

Poem

🐰 A rabbit hops through events with care,
Capture phase now leads the fair dance there,
When clicks stop short on anchor's say,
Our tooltip opens up the way!
Propagation blocked? No longer feared,
The captured moment has appeared!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: fixing tooltip opening behavior when anchor stops click propagation.
Linked Issues check	✅ Passed	The changes implement the fix for issue #1274 by updating event delegation to use capture phase for click listeners, enabling tooltips to open even when propagation is stopped.
Out of Scope Changes check	✅ Passed	All changes are directly related to the issue objective: extending event delegation to support capture phase, updating tooltip event listeners, and adding test coverage.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/delegated-event-listener-regression

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/components/Tooltip/event-delegation.ts

Oops! Something went wrong! :(

ESLint: 10.2.0

TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module "file:///.eslintrc.json?mtime=1779826179640" needs an import attribute of "type: json"
at validateAttributes (node:internal/modules/esm/assert:88:15)
at defaultLoadSync (node:internal/modules/esm/load:164:3)
at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:776:12)
at #loadSync (node:internal/modules/esm/loader:796:49)
at ModuleLoader.load (node:internal/modules/esm/loader:762:26)
at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:504:31)
at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:555:36)
at afterResolve (node:internal/modules/esm/loader:603:52)
at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:609:12)
at node:internal/modules/esm/loader:628:32

src/components/Tooltip/use-tooltip-events.tsx

Oops! Something went wrong! :(

ESLint: 10.2.0

TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module "file:///.eslintrc.json?mtime=1779826179640" needs an import attribute of "type: json"
at validateAttributes (node:internal/modules/esm/assert:88:15)
at defaultLoadSync (node:internal/modules/esm/load:164:3)
at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:776:12)
at #loadSync (node:internal/modules/esm/loader:796:49)
at ModuleLoader.load (node:internal/modules/esm/loader:762:26)
at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:504:31)
at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:555:36)
at afterResolve (node:internal/modules/esm/loader:603:52)
at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:609:12)
at node:internal/modules/esm/loader:628:32

src/test/tooltip-interaction-behavior.spec.js

Oops! Something went wrong! :(

ESLint: 10.2.0

TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module "file:///.eslintrc.json?mtime=1779826179640" needs an import attribute of "type: json"
at validateAttributes (node:internal/modules/esm/assert:88:15)
at defaultLoadSync (node:internal/modules/esm/load:164:3)
at #loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:776:12)
at #loadSync (node:internal/modules/esm/loader:796:49)
at ModuleLoader.load (node:internal/modules/esm/loader:762:26)
at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:504:31)
at #getOrCreateModuleJobAfterResolve (node:internal/modules/esm/loader:555:36)
at afterResolve (node:internal/modules/esm/loader:603:52)
at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:609:12)
at node:internal/modules/esm/loader:628:32

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Beta version released with the last commit 🚀

yarn add react-tooltip@6.0.4-beta.1275.rc.0

or

npm install react-tooltip@6.0.4-beta.1275.rc.0