fix(tooltip): ignore mouseenter that follows no mouseleave - #1442
Open
rene-schakmann wants to merge 1 commit into
Open
fix(tooltip): ignore mouseenter that follows no mouseleave#1442rene-schakmann wants to merge 1 commit into
rene-schakmann wants to merge 1 commit into
Conversation
With ripple enabled, selecting an item from an overlay that is rendered inside a tooltipped host detaches the element the pointer sits on, together with the ink span of its running ripple animation. Chrome re-runs its hover computation for the detached subtree and dispatches a fresh mouseenter at the host - no pointer movement, no preceding mouseleave - which re-showed the tooltip that the very same click had just dismissed. Firefox only recomputes hover on real pointer movement, hence the browser difference in the report. An enter that is not preceded by a leave is not a new hover, so track whether the pointer is already inside the host and ignore those events. Fixes openng-org#950
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #950 — tooltip reappears after selecting an item, with ripple enabled, in Chrome.
Root cause
The overlay of a
p-select/p-dropdownis rendered inside the tooltipped host (appendTodefaults to'self'), so the option<li>the pointer sits on is a descendant of the elementTooltiplistens on.Selecting an option detaches that
<li>— together with the<span class="p-ink">of its running ripple animation. Chrome then re-runs its hover computation for the detached subtree and dispatches a freshmouseenterat the host: no pointer movement, and nomouseleavein between.Tooltip.onMouseEnteronly guarded on!this.container && !this.showTimeout, both true right after the click hid the tooltip, so it re-showed the tooltip that the very same click had just dismissed — leaving it on screen while the pointer is nowhere near the host.Firefox only recomputes hover on real pointer movement, which is why the report is Chrome-only. Removing the ripple ink from the DOM makes the spurious enter disappear as well, matching "only when ripple is enabled" from the report.
Instrumented event log from the reproduction (pointer stationary throughout):
The fix
An enter that is not preceded by a leave is not a new hover.
Tooltipnow tracks whether the pointer is already inside the host and ignores those re-entrant events. Genuine hover, leave/re-enter, focus and touch paths are untouched.Verification
Reproduced in the environment named in the issue — Angular 15 + PrimeNG 15, ripple on via
PrimeNGConfig,pTooltiponp-dropdown, Chrome 108 in Docker — driven over WebDriver with real pointer events and no pointer movement after the item click."Rome" is selected in both; on the left the tooltip is stranded next to the closed dropdown.
tooltip.spec.tscovering the invariant end to end. 3 of them fail without the fix and pass with it.pnpm run test:unit: 7210 passing. The single failure isScrollTop Performance should handle rapid scroll events efficiently, which is timing-sensitive under full-suite load and passes whenscrolltop.spec.tsruns on its own — unrelated to this change.pnpm run format:checkclean. Note:pnpm run lintfails onmainas well (eslint --ignore-pathis not valid with the flat config), so it could not be used as a gate here;eslintrun directly on the changed files reports no errors.Co-authored by Claude.