Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Hovercard not cleaning up its hide timeout #2289

Merged
merged 2 commits into from
Apr 21, 2023
Merged

Fix Hovercard not cleaning up its hide timeout #2289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
460cd79
Fix `Hovercard` not cleaning up its hide timeout
diegohaz Apr 21, 2023
675f011
Add changeset
diegohaz Apr 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/stale-bugs-unite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@ariakit/react-core": patch
"@ariakit/react": patch
---

Fixed `Hovercard` not properly cleaning up the timeout to hide the card when
unmounted. ([#2289](https://github.com/ariakit/ariakit/pull/2289))
12 changes: 7 additions & 5 deletions packages/ariakit-react-core/src/hovercard/hovercard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function isMovingOnHovercard(
return false;
}

// The autoFocusOnShow store will be set to true when the hovercard disclosure
// The autoFocusOnShow state will be set to true when the hovercard disclosure
// element is clicked. We have to reset it to false when the hovercard element
// gets hidden or is unmounted.
function useAutoFocusOnShow({ store, ...props }: HovercardProps) {
Expand Down Expand Up @@ -207,7 +207,7 @@ export const useHovercard = createHook<HovercardOptions>(
// through valid hovercard elements.
if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) {
// While the mouse is moving over the anchor element while the hover
// card is open, keep track of the mouse position so we'll use the
// card is open, keep track of the mouse position so we can use the
// last point before the mouse leaves the anchor element.
enterPointRef.current =
target && anchor && contains(anchor, target)
Expand All @@ -225,7 +225,7 @@ export const useHovercard = createHook<HovercardOptions>(
if (enterPoint) {
const currentPoint = getEventPoint(event);
const polygon = getElementPolygon(element, enterPoint);
// If the current's event mouse position is inside the transit
// If the current event's mouse position is inside the transit
// polygon, this means that the mouse is moving toward the hover card,
// so we disable this event. This is necessary because the mousemove
// event may trigger focus on other elements and close the hovercard.
Expand All @@ -245,7 +245,9 @@ export const useHovercard = createHook<HovercardOptions>(
store.hide();
}, hideTimeout);
};
return addGlobalEventListener("mousemove", onMouseMove, true);
return chain(addGlobalEventListener("mousemove", onMouseMove, true), () =>
clearTimeout(hideTimeoutRef.current)
);
}, [
store,
domReady,
Expand Down Expand Up @@ -288,7 +290,7 @@ export const useHovercard = createHook<HovercardOptions>(
const registerOnParent = useContext(NestedHovercardContext);

// Register the hovercard as a nested hovercard on the parent hovercard if
// if it's not a modal, is portal and is mounted. We don't need to register
// it's not a modal, is portal and is mounted. We don't need to register
// non-portal hovercards because they will be captured by the contains
// function in the isMovingOnHovercard function above. This must be a layout
// effect so we don't lose mouse move events right after the nested
Expand Down