feat: Allow Tooltip to remain visible when trigger is clicked (#9027)

* feat(tooltip): add closeOnPress prop to keep tooltip visible after clicked

* remove default value for closeOnPress prop in TooltipTrigger stories

* add default value on closeOnPress props

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

---------

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

Author: komkanit

packages/@react-aria/tooltip/src/useTooltipTrigger.ts

@@ -36,7 +36,8 @@ export interface TooltipTriggerAria {
 export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTriggerState, ref: RefObject<FocusableElement | null>) : TooltipTriggerAria {
   let {
     isDisabled,
-    trigger
+    trigger,
+    closeOnPress = true
   } = props;
 
   let tooltipId = useId();
@@ -102,6 +103,10 @@ export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTrig
   };
 
   let onPressStart = () => {
+    // if closeOnPress is false, we should not close the tooltip
+    if (!closeOnPress) {
+      return;
+    }
     // no matter how the trigger is pressed, we should close the tooltip
     isFocused.current = false;
     isHovered.current = false;

packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx

@@ -22,14 +22,16 @@ import {useTooltipTriggerState} from '@react-stately/tooltip';
 
 const DEFAULT_OFFSET = -1; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const DEFAULT_CROSS_OFFSET = 0;
+const DEFAULT_CLOSE_ON_PRESS = true; // Whether the tooltip should close when the trigger is pressed
 
 function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
   let {
     children,
     crossOffset = DEFAULT_CROSS_OFFSET,
     isDisabled,
     offset = DEFAULT_OFFSET,
-    trigger: triggerAction
+    trigger: triggerAction,
+    closeOnPress = DEFAULT_CLOSE_ON_PRESS
   } = props;
 
   let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
@@ -40,7 +42,8 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
 
   let {triggerProps, tooltipProps} = useTooltipTrigger({
     isDisabled,
-    trigger: triggerAction
+    trigger: triggerAction,
+    closeOnPress
   }, state, tooltipTriggerRef);
 
   let [borderRadius, setBorderRadius] = useState(0);

packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx

@@ -72,6 +72,9 @@ const argTypes = {
   },
   children: {
     control: {disable: true}
+  },
+  closeOnPress: {
+    control: 'boolean'
   }
 };
 
@@ -113,7 +116,8 @@ export default {
       <ActionButton aria-label="Edit Name"><Edit /></ActionButton>,
       <Tooltip>Change Name</Tooltip>
     ],
-    onOpenChange: action('openChange')
+    onOpenChange: action('openChange'),
+    closeOnPress: true
   },
   argTypes: argTypes
 } as Meta<typeof TooltipTrigger>;

packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js

@@ -330,6 +330,48 @@ describe('TooltipTrigger', function () {
     expect(queryByRole('tooltip')).toBeNull();
   });
 
+  it('does not close if the trigger is clicked when closeOnPress is false',  async () => {
+    let {getByRole, getByLabelText} = render(
+      <Provider theme={theme}>
+        <TooltipTrigger onOpenChange={onOpenChange} delay={0} closeOnPress={false}>
+          <ActionButton aria-label="trigger" />
+          <Tooltip>Helpful information.</Tooltip>
+        </TooltipTrigger>
+      </Provider>
+    );
+    await user.click(document.body);
+
+    let button = getByLabelText('trigger');
+    await user.hover(button);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    let tooltip = getByRole('tooltip');
+    expect(tooltip).toBeVisible();
+    await user.click(button);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(tooltip).toBeVisible();
+  });
+
+  it('does not close if the trigger is clicked with the keyboard when closeOnPress is false',  async () => {
+    let {getByRole, getByLabelText} = render(
+      <Provider theme={theme}>
+        <TooltipTrigger onOpenChange={onOpenChange} delay={0} closeOnPress={false}>
+          <ActionButton aria-label="trigger" />
+          <Tooltip>Helpful information.</Tooltip>
+        </TooltipTrigger>
+      </Provider>
+    );
+
+    let button = getByLabelText('trigger');
+    await user.tab();
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    let tooltip = getByRole('tooltip');
+    expect(tooltip).toBeVisible();
+    fireEvent.keyDown(button, {key: 'Enter'});
+    fireEvent.keyUp(button, {key: 'Enter'});
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(tooltip).toBeVisible();
+  });
+
   describe('delay', () => {
     it('opens immediately for focus',  () => {
       let {getByRole, getByLabelText} = render(

packages/@react-types/tooltip/src/index.d.ts

@@ -36,7 +36,13 @@ export interface TooltipTriggerProps extends OverlayTriggerProps {
    * By default, opens for both focus and hover. Can be made to open only for focus.
    * @default 'hover'
    */
-  trigger?: 'hover' | 'focus'
+  trigger?: 'hover' | 'focus',
+
+  /**
+   * Whether the tooltip should close when the trigger is pressed.
+   * @default true
+   */
+  closeOnPress?: boolean
 }
 
 export interface SpectrumTooltipTriggerProps extends Omit<TooltipTriggerProps, 'closeDelay'>, PositionProps {