From be24a8389a9c3dc02c006d45c4c8ed40c59b5892 Mon Sep 17 00:00:00 2001
From: denkristoffer <denkristoffer@users.noreply.github.com>
Date: Tue, 26 Jan 2021 16:50:30 +0100
Subject: [PATCH] fix(tooltip): pointer-events disabled on button toggles

A fix for #805

See https://github.com/facebook/react/issues/4251#issuecomment-267004045
---
 .../src/components/Tooltip/Tooltip.css                        | 4 ++++
 .../src/components/Tooltip/Tooltip.tsx                        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css
index b53269b378..7b7d84cf77 100644
--- a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css
+++ b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.css
@@ -35,6 +35,10 @@
   z-index: var(--z-index-negative);
 }
 
+.TooltipContainer > button[disabled] {
+  pointer-events: none;
+}
+
 .Tooltip__arrow {
   position: absolute;
 }
diff --git a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx
index 33eab39952..ad28ae570c 100644
--- a/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx
+++ b/packages/forma-36-react-components/src/components/Tooltip/Tooltip.tsx
@@ -200,7 +200,7 @@ export const Tooltip = ({
     <>
       <ContainerElement
         ref={elementRef}
-        className={targetWrapperClassName}
+        className={cn(styles.TooltipContainer, targetWrapperClassName)}
         onMouseEnter={(evt: MouseEvent) => {
           setIsHoveringTarget(true);
           if (onMouseOver) onMouseOver(evt);