Stop using propagation when escape key is pressed, update useTooltipT…

…rigger.ts (#4203) Escape to close tooltip no longer closes dialogs
adobe · Mar 15, 2023 · e044ef7 · e044ef7 · rspbot · Mar 15, 2023
1 parent dabf87d
commit e044ef7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/@react-aria/tooltip/src/useTooltipTrigger.ts b/packages/@react-aria/tooltip/src/useTooltipTrigger.ts
@@ -64,6 +64,7 @@ export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTrig
         // Escape after clicking something can give it keyboard focus
         // dismiss tooltip on esc key press
         if (e.key === 'Escape') {
+          e.stopPropagation();
           state.close(true);
         }
       }

diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
@@ -26,6 +26,7 @@ import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Provider} from '@react-spectrum/provider';
 import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
+import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 
 storiesOf('DialogTrigger', module)
   .addParameters({providerSwitcher: {status: 'notice'}})
@@ -362,6 +363,27 @@ storiesOf('DialogTrigger', module)
   .add(
     'adjustable dialog',
     () => <AdjustableDialog />
+  )
+  .add(
+    'withTooltip',
+    () => (
+      <div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
+        <DialogTrigger isDismissable>
+          <ActionButton>Trigger</ActionButton>
+          <Dialog>
+            <Heading>Has tooltip</Heading>
+            <Divider />
+            <Content>
+              <p>Pressing escape when Tooltip is open closes Tooltip and not Dialog too.</p>
+              <TooltipTrigger>
+                <Button variant="cta">Has tooltip</Button>
+                <Tooltip>Press escape</Tooltip>
+              </TooltipTrigger>
+            </Content>
+          </Dialog>
+        </DialogTrigger>
+      </div>
+    )
   );
 
 function render({width = 'auto', ...props}) {