fix: controlled tooltips are not close properly (#6418)

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-stately/tooltip/src/useTooltipTriggerState.ts

@@ -46,6 +46,7 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
   let {isOpen, open, close} = useOverlayTriggerState(props);
   let id = useMemo(() => `${++tooltipId}`, []);
   let closeTimeout = useRef<ReturnType<typeof setTimeout>>();
+  let closeCallback = useRef<() => void>(close);
 
   let ensureTooltipEntry = () => {
     tooltips[id] = hideTooltip;
@@ -81,11 +82,11 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
     if (immediate || closeDelay <= 0) {
       clearTimeout(closeTimeout.current);
       closeTimeout.current = null;
-      close();
+      closeCallback.current();
     } else if (!closeTimeout.current) {
       closeTimeout.current = setTimeout(() => {
         closeTimeout.current = null;
-        close();
+        closeCallback.current();
       }, closeDelay);
     }
 
@@ -119,6 +120,10 @@ export function useTooltipTriggerState(props: TooltipTriggerProps = {}): Tooltip
     }
   };
 
+  useEffect(() => {
+    closeCallback.current = close;
+  }, [close]);
+
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
     return () => {

packages/@react-stately/tooltip/test/useTooltipTriggerState.test.js

@@ -37,7 +37,7 @@ function TooltipTrigger(props) {
 
   return (
     <span>
-      <button aria-label="trigger" ref={ref} {...triggerProps}>
+      <button aria-label={props.label ?? 'trigger'} ref={ref} {...triggerProps}>
         {props.children}
       </button>
       {state.isOpen &&
@@ -46,6 +46,23 @@ function TooltipTrigger(props) {
   );
 }
 
+function ManualTooltipTrigger(props) {
+  let [isOpen, setOpen] = React.useState(false);
+
+  const onOpenChange = (isOpen) => {
+    props.onOpenChange(isOpen);
+    setOpen(isOpen);
+  };
+  
+  return (
+    <TooltipTrigger
+      label={props.label}
+      onOpenChange={onOpenChange}
+      isOpen={isOpen}
+      tooltip={props.tooltip} />
+  );
+}
+
 /**
  * Most of the tests for useTooltipTriggerState are in the React Spectrum package at
  * @react-spectrum/tooltip/test/TooltipTrigger.test.js. The React Spectrum tooltip
@@ -196,4 +213,45 @@ describe('useTooltipTriggerState', function () {
       expect(onOpenChange).toHaveBeenCalledWith(false);
     });
   });
+
+  describe('multiple controlled tooltips', () => {
+    it('closes previus tooltip when opening a new one', () => {
+      let secondOnOpenChange = jest.fn();
+
+      let {queryByRole, getByLabelText} = render(
+        <>
+          <ManualTooltipTrigger onOpenChange={onOpenChange} tooltip="First tooltip" label="trigger1">
+            Trigger 1
+          </ManualTooltipTrigger>
+
+          <ManualTooltipTrigger onOpenChange={secondOnOpenChange} tooltip="Second tooltip" label="trigger2">
+            Trigger 2
+          </ManualTooltipTrigger>
+        </>
+      );
+
+      fireEvent.mouseDown(document.body);
+      fireEvent.mouseUp(document.body);
+
+      let button1 = getByLabelText('trigger1');
+      fireEvent.mouseEnter(button1);
+      fireEvent.mouseMove(button1);
+
+      // run through open timer and confirm that it has opened
+      act(() => jest.advanceTimersByTime(TOOLTIP_DELAY));
+
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+      expect(queryByRole('tooltip')).toBeVisible();
+
+      let button2 = getByLabelText('trigger2');
+      fireEvent.mouseEnter(button2);
+      fireEvent.mouseMove(button2);
+
+      // run through open timer and confirm that it has opened
+      act(() => jest.advanceTimersByTime(TOOLTIP_DELAY));
+
+      expect(onOpenChange).toHaveBeenCalledTimes(2);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
 });