Fix Hovercard when using multiple anchors (#3037)

When multiple `HovercardAnchor` elements are used for the same
`Hovercard`, a bug occurred in the popover's position because the
`anchorElement` was reset each time the popover was mounted. This PR
resolves the problem by not depending on the `mounted` state, but
instead setting the `disclosureElement` state in a microtask following
the display of the popover.

.changeset/3037-hovercard-anchor.md

@@ -0,0 +1,6 @@
+---
+"@ariakit/react-core": patch
+"@ariakit/react": patch
+---
+
+Fixed [Hovercard](https://ariakit.org/components/hovercard) when used with multiple [`HovercardAnchor`](https://ariakit.org/reference/hovercard-anchor) elements.

packages/ariakit-react-core/src/hovercard/hovercard-anchor.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent as ReactMouseEvent } from "react";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
 import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
@@ -38,7 +38,6 @@ export const useHovercardAnchor = createHook<HovercardAnchorOptions>(
         "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component.",
     );
 
-    const mounted = store.useState("mounted");
     const disabled = disabledFromProps(props);
     const showTimeoutRef = useRef(0);
 
@@ -67,35 +66,50 @@ export const useHovercardAnchor = createHook<HovercardAnchorOptions>(
 
     const onMouseMove = useEvent(
       (event: ReactMouseEvent<HTMLAnchorElement>) => {
-        store?.setAnchorElement(event.currentTarget);
         onMouseMoveProp?.(event);
         if (disabled) return;
         if (event.defaultPrevented) return;
         if (showTimeoutRef.current) return;
         if (!isMouseMoving()) return;
         if (!store) return;
         if (!showOnHoverProp(event)) return;
+        const element = event.currentTarget;
+        store.setAnchorElement(element);
         const { showTimeout, timeout } = store.getState();
         showTimeoutRef.current = window.setTimeout(() => {
           showTimeoutRef.current = 0;
           // Let's check again if the mouse is moving. This is to avoid showing
           // the hovercard on mobile clicks or after clicking on the anchor.
           if (!isMouseMoving()) return;
+          store?.setAnchorElement(element);
           store?.show();
+          queueMicrotask(() => {
+            // We need to set the anchor element as the hovercard disclosure
+            // element only when the hovercard is shown so it doesn't get
+            // assigned an arbitrary element by the dialog component.
+            store?.setDisclosureElement(element);
+          });
         }, showTimeout ?? timeout);
       },
     );
 
+    const ref = useCallback(
+      (element: HTMLElement | null) => {
+        if (!store) return;
+        const { anchorElement } = store.getState();
+        if (anchorElement?.isConnected) return;
+        // We can set the anchor element only if it isn't already set or if it's
+        // not linked to the DOM. This helps prevent the anchor element from
+        // being reassigned to a different element when using multiple anchors
+        // and new anchors are added to the DOM.
+        store.setAnchorElement(element);
+      },
+      [store],
+    );
+
     props = {
       ...props,
-      ref: useMergeRefs(
-        store.setAnchorElement,
-        // We need to set the anchor element as the hovercard disclosure
-        // disclosure element only when the hovercard is shown so it doesn't get
-        // assigned an arbitrary element by the dialog component.
-        mounted ? store.setDisclosureElement : undefined,
-        props.ref,
-      ),
+      ref: useMergeRefs(ref, props.ref),
       onMouseMove,
     };