fix(tooltip): pointer-events disabled on button toggles

A fix for #805 See facebook/react#4251 (comment)
contentful · Jan 26, 2021 · be24a83 · be24a83
1 parent 6f36fa0
commit be24a83
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 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
@@ -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
@@ -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);