Merge pull request #763 from petermakowski/feat-tooltip-on-click-shou…

…ld-remain-open-until-dismissed-759

fix: tooltip on click should remain open until dismissed

cypress/integration/tooltip.spec.js

@@ -8,4 +8,35 @@ context("Tooltip", () => {
     cy.findByRole("button", { name: /Hover over me!/ }).click();
     cy.findByRole("tooltip").should("be.visible");
   });
+
+  it("hovering the child button element opens the tooltip", () => {
+    cy.findByRole("tooltip").should("not.be.visible");
+    cy.findByRole("button", { name: /Hover over me!/ }).trigger("mouseover");
+    cy.findByRole("tooltip").should("be.visible");
+  });
+
+  it("when activated on click tooltip remains open when the cursor is moved outside", () => {
+    cy.findByRole("tooltip").should("not.be.visible");
+    cy.findByRole("button", { name: /Hover over me!/ }).click();
+    cy.get("body").trigger("mousemove", { clientX: 0, clientY: 0 });
+    cy.findByRole("tooltip").should("be.visible");
+    cy.get("body").type("{esc}");
+    cy.findByRole("tooltip").should("not.be.visible");
+  });
+
+  it("when activated on click tooltip can be closed with an ESC key", () => {
+    cy.findByRole("tooltip").should("not.be.visible");
+    cy.findByRole("button", { name: /Hover over me!/ }).click();
+    cy.findByRole("tooltip").should("be.visible");
+    cy.get("body").type("{esc}");
+    cy.findByRole("tooltip").should("not.be.visible");
+  });
+
+  it("when activated on click tooltip can be closed by clicking outside of it", () => {
+    cy.findByRole("tooltip").should("not.be.visible");
+    cy.findByRole("button", { name: /Hover over me!/ }).click();
+    cy.findByRole("tooltip").should("be.visible");
+    cy.get("body").click(0, 0);
+    cy.findByRole("tooltip").should("not.be.visible");
+  });
 });

package.json

@@ -125,8 +125,8 @@
     "test-cypress": "concurrently 'yarn run docs' 'yarn run cypress:test' -k -s first",
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
-    "cypress:run": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:run": "cypress run --env port=${PORT:-9009}",
+    "cypress:open": "cypress open --env port=${PORT:-9009}"
   },
   "eslintConfig": {
     "extends": "react-app"

src/components/Tooltip/Tooltip.tsx

@@ -243,7 +243,28 @@ const Tooltip = ({
     autoAdjust && followMouse
   );
 
+  const handleKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closePortal();
+      }
+    },
+    [closePortal]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keypress", handleKeyPress);
+    return () => {
+      window.removeEventListener("keypress", handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
   const handleBlur = (e) => {
+    // do not close if the focus is within the tooltip wrapper
+    if (wrapperRef?.current?.contains(document.activeElement)) {
+      return;
+    }
+
     if (
       e.relatedTarget
         ? !messageRef.current?.contains(e.relatedTarget)
@@ -253,12 +274,22 @@ const Tooltip = ({
     }
   };
 
+  const handleClick = (e) => {
+    // ignore clicks within the tooltip message
+    if (messageRef.current?.contains(e.target)) {
+      return;
+    }
+    e.target.focus();
+    openPortal();
+  };
+
   return (
     <>
       {message ? (
         <span
           className={className}
           onBlur={handleBlur}
+          onClick={handleClick}
           onFocus={openPortal}
           onMouseOut={handleBlur}
           onMouseOver={openPortal}