stop propagation of clicks on tooltips

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

@@ -14,7 +14,7 @@ import {AriaTooltipProps} from '@react-types/tooltip';
 import {DOMAttributes} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {TooltipTriggerState} from '@react-stately/tooltip';
-import {useHover} from '@react-aria/interactions';
+import {useHover, usePress} from '@react-aria/interactions';
 
 export interface TooltipAria {
   /**
@@ -28,14 +28,15 @@ export interface TooltipAria {
  */
 export function useTooltip(props: AriaTooltipProps, state?: TooltipTriggerState): TooltipAria {
   let domProps = filterDOMProps(props, {labelable: true});
+  let {pressProps} = usePress({});
 
   let {hoverProps} = useHover({
     onHoverStart: () => state?.open(true),
     onHoverEnd: () => state?.close()
   });
 
   return {
-    tooltipProps: mergeProps(domProps, hoverProps, {
+    tooltipProps: mergeProps(domProps, hoverProps, pressProps, {
       role: 'tooltip'
     })
   };

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

@@ -17,7 +17,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 import Edit from '@spectrum-icons/workflow/Edit';
 import {Flex} from '@react-spectrum/layout';
 import {Link} from '@react-spectrum/link';
-import React, {useState} from 'react';
+import React, {CSSProperties, useState} from 'react';
 import SaveTo from '@spectrum-icons/workflow/SaveTo';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {Tooltip, TooltipTrigger} from '../src';
@@ -176,6 +176,24 @@ export const TooltripTriggerInsideActionGroup: TooltipTriggerStory = {
   )
 };
 
+const TooltipDivRender = (args) => {
+  const [isDisabled, setIsDisabled] = useState(false);
+  const wrapperStyle: CSSProperties = {width: '400px', height: '400px', backgroundColor: 'red', position: 'absolute'};
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div onClick={() => setIsDisabled(!isDisabled)} style={wrapperStyle}>
+      <TooltipTrigger {...args} isOpen>
+        <ActionButton isDisabled={isDisabled} aria-label="Edit" UNSAFE_style={{top: '50px'}}>click red to disable</ActionButton>
+        <Tooltip>Click on tooltip doesn't propagate to parent</Tooltip>
+      </TooltipTrigger>
+    </div>
+  );
+};
+export const TooltripTriggerInsideDiv: TooltipTriggerStory = {
+  args: {delay: 0},
+  render: TooltipDivRender
+};
+
 export const ArrowPositioningAtEdge: TooltipTriggerStory = {
   args: {
     children: [

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

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {fireEvent, render} from '@react-spectrum/test-utils';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils';
 import {Tooltip} from '../';
 
 describe('Tooltip', function () {
@@ -40,4 +40,15 @@ describe('Tooltip', function () {
     let tooltip = getByRole('tooltip');
     expect(ref.current.UNSAFE_getDOMNode()).toBe(tooltip);
   });
+
+  it('click does not propagate to parent', () => {
+    let mockClick = jest.fn();
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    let {getByRole} = render(<div onClick={mockClick}><Tooltip>This is a tooltip</Tooltip></div>);
+    let tooltip = getByRole('tooltip');
+    fireEvent.pointerDown(tooltip);
+    fireEvent.click(tooltip);
+    fireEvent.mouseDown(tooltip);
+    expect(mockClick).not.toHaveBeenCalled();
+  });
 });