Skip to content

Commit e044ef7

Browse files
authored
Stop using propagation when escape key is pressed, update useTooltipTrigger.ts (#4203)
Escape to close tooltip no longer closes dialogs
1 parent dabf87d commit e044ef7

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export function useTooltipTrigger(props: TooltipTriggerProps, state: TooltipTrig
6464
// Escape after clicking something can give it keyboard focus
6565
// dismiss tooltip on esc key press
6666
if (e.key === 'Escape') {
67+
e.stopPropagation();
6768
state.close(true);
6869
}
6970
}

packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
2626
import {Provider} from '@react-spectrum/provider';
2727
import React, {useState} from 'react';
2828
import {storiesOf} from '@storybook/react';
29+
import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
2930

3031
storiesOf('DialogTrigger', module)
3132
.addParameters({providerSwitcher: {status: 'notice'}})
@@ -362,6 +363,27 @@ storiesOf('DialogTrigger', module)
362363
.add(
363364
'adjustable dialog',
364365
() => <AdjustableDialog />
366+
)
367+
.add(
368+
'withTooltip',
369+
() => (
370+
<div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
371+
<DialogTrigger isDismissable>
372+
<ActionButton>Trigger</ActionButton>
373+
<Dialog>
374+
<Heading>Has tooltip</Heading>
375+
<Divider />
376+
<Content>
377+
<p>Pressing escape when Tooltip is open closes Tooltip and not Dialog too.</p>
378+
<TooltipTrigger>
379+
<Button variant="cta">Has tooltip</Button>
380+
<Tooltip>Press escape</Tooltip>
381+
</TooltipTrigger>
382+
</Content>
383+
</Dialog>
384+
</DialogTrigger>
385+
</div>
386+
)
365387
);
366388

367389
function render({width = 'auto', ...props}) {

0 commit comments

Comments
 (0)