Skip to content

Commit 903b188

Browse files
Revert Tooltip updates to close on child enter/space key interactions (#11800)
1 parent 8b398b8 commit 903b188

File tree

4 files changed

+6
-83
lines changed

4 files changed

+6
-83
lines changed

.changeset/flat-eagles-press.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
'@shopify/polaris': minor
33
---
44

5-
Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines. Updated `Tooltip` to dismiss on child enter/space key interactions.
5+
Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines

polaris-react/src/components/Button/Button.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -854,6 +854,7 @@ export function CopyToClipboard() {
854854
hoverDelay={500}
855855
preferredPosition="above"
856856
content="Copy"
857+
active={status === 'copied' ? false : undefined}
857858
>
858859
<Button
859860
variant="tertiary"

polaris-react/src/components/Tooltip/Tooltip.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -159,15 +159,10 @@ export function Tooltip({
159159

160160
const handleKeyUp = useCallback(
161161
(event: React.KeyboardEvent) => {
162-
const isChildInteraction =
163-
event.target !== activatorContainer.current &&
164-
(event.key === 'Enter' || event.key === ' ');
165-
166-
if (event.key === 'Escape' || isChildInteraction) {
167-
handleClose?.();
168-
handleBlur();
169-
persistOnClick && togglePersisting();
170-
}
162+
if (event.key !== 'Escape') return;
163+
handleClose?.();
164+
handleBlur();
165+
persistOnClick && togglePersisting();
171166
},
172167
[handleBlur, handleClose, persistOnClick, togglePersisting],
173168
);
@@ -214,11 +209,6 @@ export function Tooltip({
214209
handleFocus();
215210
}}
216211
onBlur={() => {
217-
if (hoverDelayTimeout.current) {
218-
clearTimeout(hoverDelayTimeout.current);
219-
hoverDelayTimeout.current = null;
220-
}
221-
222212
handleClose();
223213
handleBlur();
224214

polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx

Lines changed: 0 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -132,74 +132,6 @@ describe('<Tooltip />', () => {
132132
});
133133
});
134134

135-
it('does not close when enter is pressed on keyup of the activatorContainer', () => {
136-
const tooltip = mountWithApp(
137-
<Tooltip active content="This order has shipping labels.">
138-
<div>Order #1001</div>
139-
</Tooltip>,
140-
);
141-
142-
findWrapperComponent(tooltip)!.trigger('onKeyUp', {
143-
target: tooltip.domNode,
144-
key: 'Enter',
145-
});
146-
147-
expect(tooltip).toContainReactComponent(TooltipOverlay, {
148-
active: true,
149-
});
150-
});
151-
152-
it('does not close when space is pressed on keyup of the activatorContainer', () => {
153-
const tooltip = mountWithApp(
154-
<Tooltip active content="This order has shipping labels.">
155-
<div>Order #1001</div>
156-
</Tooltip>,
157-
);
158-
159-
findWrapperComponent(tooltip)!.trigger('onKeyUp', {
160-
target: tooltip.domNode,
161-
key: ' ',
162-
});
163-
164-
expect(tooltip).toContainReactComponent(TooltipOverlay, {
165-
active: true,
166-
});
167-
});
168-
169-
it('closes itself when enter is pressed on keyup of child elements', () => {
170-
const tooltip = mountWithApp(
171-
<Tooltip active content="This order has shipping labels.">
172-
<button>Order #1001</button>
173-
</Tooltip>,
174-
);
175-
176-
findWrapperComponent(tooltip)!.trigger('onKeyUp', {
177-
target: tooltip.find('button')!.domNode,
178-
key: 'Enter',
179-
});
180-
181-
expect(tooltip).toContainReactComponent(TooltipOverlay, {
182-
active: false,
183-
});
184-
});
185-
186-
it('closes itself when space is pressed on keyup of child elements', () => {
187-
const tooltip = mountWithApp(
188-
<Tooltip active content="This order has shipping labels.">
189-
<button>Order #1001</button>
190-
</Tooltip>,
191-
);
192-
193-
findWrapperComponent(tooltip)!.trigger('onKeyUp', {
194-
target: tooltip.find('button')!.domNode,
195-
key: ' ',
196-
});
197-
198-
expect(tooltip).toContainReactComponent(TooltipOverlay, {
199-
active: false,
200-
});
201-
});
202-
203135
it('does not call onOpen when initially activated', () => {
204136
const openSpy = jest.fn();
205137
const tooltip = mountWithApp(

0 commit comments

Comments
 (0)