Fix unmounting

atomiks · Apr 16, 2024 · 61d7833 · 61d7833
1 parent a6fb745
commit 61d7833
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/docs/pages/experiments/tooltip.tsx b/docs/pages/experiments/tooltip.tsx
@@ -2,21 +2,6 @@ import * as React from 'react';
 import * as Tooltip from '@base_ui/react/Tooltip';
 import { styled } from '@mui/system';
 
-export default function UnstyledTooltipIntroduction() {
-  return (
-    <div style={{ width: 700, margin: '0 auto', padding: 50 }}>
-      <Tooltip.Root>
-        <Tooltip.AnchorFragment>
-          <AnchorButton>Anchor</AnchorButton>
-        </Tooltip.AnchorFragment>
-        <TooltipContent sideOffset={7} arrowPadding={3}>
-          Tooltip
-        </TooltipContent>
-      </Tooltip.Root>
-    </div>
-  );
-}
-
 const blue = {
   400: '#3399FF',
   600: '#0072E6',
@@ -65,3 +50,18 @@ export const AnchorButton = styled('button')`
     background: ${blue[800]};
   }
 `;
+
+export default function TooltipTransitionExperiment() {
+  return (
+    <div style={{ width: 700, margin: '0 auto', padding: 50 }}>
+      <Tooltip.Root>
+        <Tooltip.AnchorFragment>
+          <AnchorButton>Anchor</AnchorButton>
+        </Tooltip.AnchorFragment>
+        <TooltipContent sideOffset={7} arrowPadding={3}>
+          Tooltip
+        </TooltipContent>
+      </Tooltip.Root>
+    </div>
+  );
+}
diff --git a/packages/mui-base/src/useTooltip/useTooltip.ts b/packages/mui-base/src/useTooltip/useTooltip.ts
@@ -24,6 +24,7 @@ import { getSide, getAlignment } from '@floating-ui/utils';
 import type { UseTooltipParameters, UseTooltipReturnValue } from './useTooltip.types';
 import { mergeReactProps } from '../utils/mergeReactProps';
 import { useTransitionStatus } from '../Tooltip/useTransitionStatus';
+import { ownerWindow } from '../utils/owner';
 
 /**
  * The basic building block for creating custom tooltips.
@@ -57,6 +58,8 @@ export function useTooltip(params: UseTooltipParameters): UseTooltipReturnValue
     arrowPadding = 5,
   } = params;
 
+  const { mounted, setMounted, status } = useTransitionStatus(open);
+
   // Using a ref assumes that the arrow element is always present in the DOM for the lifetime of
   // the tooltip. If this assumption ends up being false, we can switch to state to manage the
   // arrow's presence.
@@ -151,7 +154,17 @@ export function useTooltip(params: UseTooltipParameters): UseTooltipReturnValue
     placement,
     middleware,
     open,
-    onOpenChange,
+    onOpenChange(openValue, eventValue, reasonValue) {
+      onOpenChange(openValue, eventValue, reasonValue);
+      const transitioningChild = refs.floating.current?.firstElementChild;
+      if (!openValue && transitioningChild) {
+        const computedStyles = ownerWindow(transitioningChild).getComputedStyle(transitioningChild);
+        const transitionDuration = parseFloat(computedStyles.transitionDuration);
+        if (transitionDuration === 0) {
+          setMounted(false);
+        }
+      }
+    },
     whileElementsMounted: autoUpdate,
     elements: {
       reference: anchorEl,
@@ -186,8 +199,6 @@ export function useTooltip(params: UseTooltipParameters): UseTooltipReturnValue
     clientPoint,
   ]);
 
-  const { mounted, setMounted, status } = useTransitionStatus(open);
-
   const getAnchorProps: UseTooltipReturnValue['getAnchorProps'] = React.useCallback(
     (externalProps = {}) => mergeReactProps(externalProps, getReferenceProps()),
     [getReferenceProps],
@@ -209,8 +220,10 @@ export function useTooltip(params: UseTooltipParameters): UseTooltipReturnValue
             pointerEvents: isHidden || followCursorAxis === 'both' ? 'none' : undefined,
             zIndex: 2147483647, // max z-index
           },
-          onTransitionEnd() {
-            setMounted((prevMounted) => (prevMounted ? false : prevMounted));
+          onTransitionEnd({ target, currentTarget }) {
+            if (target === currentTarget) {
+              setMounted((prevMounted) => (prevMounted ? false : prevMounted));
+            }
           },
         }),
       ),