Revert Tooltip updates to close on child enter/space key interactions (…

…#11800)
Shopify · Mar 28, 2024 · 0c26884 · 0c26884
1 parent eda60b0
commit 0c26884
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 83 deletions.
diff --git a/.changeset/flat-eagles-press.md b/.changeset/flat-eagles-press.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines. Updated `Tooltip` to dismiss on child enter/space key interactions.
+Added `useCopyToClipboard` hook for building copy actions matching common actions guidelines
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
@@ -854,6 +854,7 @@ export function CopyToClipboard() {
             hoverDelay={500}
             preferredPosition="above"
             content="Copy"
+            active={status === 'copied' ? false : undefined}
           >
             <Button
               variant="tertiary"

diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -159,15 +159,10 @@ export function Tooltip({
 
   const handleKeyUp = useCallback(
     (event: React.KeyboardEvent) => {
-      const isChildInteraction =
-        event.target !== activatorContainer.current &&
-        (event.key === 'Enter' || event.key === ' ');
-
-      if (event.key === 'Escape' || isChildInteraction) {
-        handleClose?.();
-        handleBlur();
-        persistOnClick && togglePersisting();
-      }
+      if (event.key !== 'Escape') return;
+      handleClose?.();
+      handleBlur();
+      persistOnClick && togglePersisting();
     },
     [handleBlur, handleClose, persistOnClick, togglePersisting],
   );
@@ -214,11 +209,6 @@ export function Tooltip({
         handleFocus();
       }}
       onBlur={() => {
-        if (hoverDelayTimeout.current) {
-          clearTimeout(hoverDelayTimeout.current);
-          hoverDelayTimeout.current = null;
-        }
-
         handleClose();
         handleBlur();
 

diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -132,74 +132,6 @@ describe('<Tooltip />', () => {
     });
   });
 
-  it('does not close when enter is pressed on keyup of the activatorContainer', () => {
-    const tooltip = mountWithApp(
-      <Tooltip active content="This order has shipping labels.">
-        <div>Order #1001</div>
-      </Tooltip>,
-    );
-
-    findWrapperComponent(tooltip)!.trigger('onKeyUp', {
-      target: tooltip.domNode,
-      key: 'Enter',
-    });
-
-    expect(tooltip).toContainReactComponent(TooltipOverlay, {
-      active: true,
-    });
-  });
-
-  it('does not close when space is pressed on keyup of the activatorContainer', () => {
-    const tooltip = mountWithApp(
-      <Tooltip active content="This order has shipping labels.">
-        <div>Order #1001</div>
-      </Tooltip>,
-    );
-
-    findWrapperComponent(tooltip)!.trigger('onKeyUp', {
-      target: tooltip.domNode,
-      key: ' ',
-    });
-
-    expect(tooltip).toContainReactComponent(TooltipOverlay, {
-      active: true,
-    });
-  });
-
-  it('closes itself when enter is pressed on keyup of child elements', () => {
-    const tooltip = mountWithApp(
-      <Tooltip active content="This order has shipping labels.">
-        <button>Order #1001</button>
-      </Tooltip>,
-    );
-
-    findWrapperComponent(tooltip)!.trigger('onKeyUp', {
-      target: tooltip.find('button')!.domNode,
-      key: 'Enter',
-    });
-
-    expect(tooltip).toContainReactComponent(TooltipOverlay, {
-      active: false,
-    });
-  });
-
-  it('closes itself when space is pressed on keyup of child elements', () => {
-    const tooltip = mountWithApp(
-      <Tooltip active content="This order has shipping labels.">
-        <button>Order #1001</button>
-      </Tooltip>,
-    );
-
-    findWrapperComponent(tooltip)!.trigger('onKeyUp', {
-      target: tooltip.find('button')!.domNode,
-      key: ' ',
-    });
-
-    expect(tooltip).toContainReactComponent(TooltipOverlay, {
-      active: false,
-    });
-  });
-
   it('does not call onOpen when initially activated', () => {
     const openSpy = jest.fn();
     const tooltip = mountWithApp(