fix: close unique popup when trigger unmounted

src/UniqueProvider/index.tsx

@@ -60,10 +60,14 @@ const UniqueProvider = ({
 
   const delayInvoke = useDelay();
 
+  // Store the target of the latest show call, used to detect removed targets
+  const targetRef = React.useRef<HTMLElement>(null);
+
   const show = useEvent(
     (showOptions: UniqueShowOptions, isOpen: () => boolean) => {
       // Store the isOpen function for later use in hide
       isOpenRef.current = isOpen;
+      targetRef.current = showOptions.target;
 
       delayInvoke(() => {
         trigger(showOptions);
@@ -75,7 +79,9 @@ const UniqueProvider = ({
     delayInvoke(() => {
       // Check if we should still hide by calling the isOpen function
       // If isOpen returns true, it means another trigger wants to keep it open
-      if (isOpenRef.current?.()) {
+      // Skip the check when the target is removed from the DOM (e.g. trigger unmounted),
+      // since its isOpen function is frozen and would keep returning true
+      if (isOpenRef.current?.() && targetRef.current?.isConnected) {
         return; // Don't hide if something else wants it open
       }
 
@@ -138,10 +144,18 @@ const UniqueProvider = ({
     mergedOptions?.prefixCls,
   ]);
 
+  const release = useEvent((target: HTMLElement) => {
+    // Close the popup only when it is currently showing for the removed target
+    if (open && targetRef.current === target) {
+      trigger(false);
+    }
+  });
+
   const contextValue = React.useMemo<UniqueContextProps>(
     () => ({
       show,
       hide,
+      release,
     }),
     [],
   );

src/context.ts

@@ -41,6 +41,8 @@ export interface UniqueShowOptions {
 export interface UniqueContextProps {
   show: (options: UniqueShowOptions, isOpen: () => boolean) => void;
   hide: (delay: number) => void;
+  /** Notify the provider a trigger target is removed (e.g. trigger unmounted) */
+  release: (target: HTMLElement) => void;
 }
 
 export const UniqueContext = React.createContext<UniqueContextProps | null>(

src/index.tsx

@@ -265,6 +265,10 @@ export function generateTrigger(
     // Use state to control here since `useRef` update not trigger render
     const [targetEle, setTargetEle] = React.useState<HTMLElement>(null);
 
+    // Keep the latest target for unmount checking
+    const targetEleRef = React.useRef<HTMLElement>(null);
+    targetEleRef.current = targetEle;
+
     // Used for forwardRef target. Not use internal
     const externalForwardRef = React.useRef<HTMLElement>(null);
 
@@ -386,6 +390,17 @@ export function generateTrigger(
     const openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
 
+    // Close the shared popup when the trigger is unmounted
+    React.useEffect(() => {
+      if (uniqueContext && unique && !parentContext) {
+        return () => {
+          if (targetEleRef.current) {
+            uniqueContext.release(targetEleRef.current);
+          }
+        };
+      }
+    }, []);
+
     const internalTriggerOpen = useEvent((nextOpen: boolean) => {
       flushSync(() => {
         if (rawOpen !== nextOpen) {

tests/unique.test.tsx

@@ -376,7 +376,7 @@ describe('Trigger.Unique', () => {
   });
 
   it('esc should close unique popup', async () => {
-    const { container,baseElement } = render(
+    const { container, baseElement } = render(
       <UniqueProvider>
         <Trigger action={['click']} popup={<div>Popup</div>} unique>
           <div className="target" />
@@ -389,4 +389,85 @@ describe('Trigger.Unique', () => {
     fireEvent.keyDown(window, { key: 'Escape' });
     expect(baseElement.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
   });
+
+  it('should hide popup when the trigger is unmounted', async () => {
+    const Demo = ({ show }: { show: boolean }) => (
+      <UniqueProvider>
+        {show && (
+          <Trigger
+            action={['hover']}
+            popup={<strong className="x-content">tooltip</strong>}
+            unique
+            mouseEnterDelay={0.1}
+            mouseLeaveDelay={0.1}
+          >
+            <div className="target">hover me</div>
+          </Trigger>
+        )}
+      </UniqueProvider>
+    );
+
+    const { container, rerender } = render(<Demo show />);
+
+    // Hover to open the popup
+    fireEvent.mouseEnter(container.querySelector('.target'));
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
+    expect(document.querySelector('.rc-trigger-popup').className).not.toContain(
+      '-hidden',
+    );
+
+    // Unmount the trigger while the popup is open
+    rerender(<Demo show={false} />);
+    await awaitFakeTimer();
+
+    // Popup should be hidden
+    expect(document.querySelector('.rc-trigger-popup').className).toContain(
+      '-hidden',
+    );
+  });
+
+  it('should not hide popup when an inactive trigger is unmounted', async () => {
+    const Demo = ({ showSecond }: { showSecond: boolean }) => (
+      <UniqueProvider>
+        <Trigger
+          action={['hover']}
+          popup={<strong className="x-content">tooltip1</strong>}
+          unique
+          mouseEnterDelay={0.1}
+          mouseLeaveDelay={0.1}
+        >
+          <div className="target1">hover1</div>
+        </Trigger>
+        {showSecond && (
+          <Trigger
+            action={['hover']}
+            popup={<strong className="x-content">tooltip2</strong>}
+            unique
+          >
+            <div className="target2">hover2</div>
+          </Trigger>
+        )}
+      </UniqueProvider>
+    );
+
+    const { container, rerender } = render(<Demo showSecond />);
+
+    // Hover first trigger to open the popup
+    fireEvent.mouseEnter(container.querySelector('.target1'));
+    await awaitFakeTimer();
+    expect(document.querySelector('.x-content').textContent).toBe('tooltip1');
+    expect(document.querySelector('.rc-trigger-popup').className).not.toContain(
+      '-hidden',
+    );
+
+    // Unmount the second (inactive) trigger, popup should keep open
+    rerender(<Demo showSecond={false} />);
+    await awaitFakeTimer();
+
+    expect(document.querySelector('.rc-trigger-popup').className).not.toContain(
+      '-hidden',
+    );
+  });
 });