From 70510815f0bcb0384f38f4b47f04faf61cbfd0c8 Mon Sep 17 00:00:00 2001
From: Scott Strubberg <sstrubberg@us.ibm.com>
Date: Thu, 19 Aug 2021 08:51:22 -0500
Subject: [PATCH] fix(button): conflicting hover state

---
 .../src/components/Button/Button-story.js     | 65 ++++++++++++++++++-
 .../react/src/components/Button/Button.js     |  8 +--
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 1207138ef49d..fb8916979cbb 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
@@ -163,6 +163,69 @@ _Default.story = {
   name: 'Button',
 };
 
+export const MouseOut = () => {
+  const [timer, setTimer] = useState(0);
+  const simulateLoading = () => {
+    setTimer(true);
+    setTimeout(() => {
+      setTimer(false);
+    }, 3000);
+  };
+
+  const [timer2, setTimer2] = useState(0);
+  const simulateLoading2 = () => {
+    setTimer2(true);
+    setTimeout(() => {
+      setTimer2(false);
+    }, 3000);
+  };
+
+  const [timer3, setTimer3] = useState(0);
+  const simulateLoading3 = () => {
+    setTimer3(true);
+    setTimeout(() => {
+      setTimer3(false);
+    }, 3000);
+  };
+  return (
+    <>
+      <div className="App" style={{ padding: '1rem' }}>
+        <Button
+          hasIconOnly
+          renderIcon={Add16}
+          tooltipAlignment="center"
+          tooltipPosition="bottom"
+          iconDescription="Button description here"
+          onClick={simulateLoading}
+          disabled={timer}
+        />
+      </div>
+      <div className="App" style={{ padding: '1rem' }}>
+        <Button
+          hasIconOnly
+          renderIcon={Add16}
+          tooltipAlignment="center"
+          tooltipPosition="bottom"
+          iconDescription="Button description here"
+          onClick={simulateLoading2}
+          disabled={timer2}
+        />
+      </div>
+      <div className="App" style={{ padding: '1rem' }}>
+        <Button
+          hasIconOnly
+          renderIcon={Add16}
+          tooltipAlignment="center"
+          tooltipPosition="bottom"
+          iconDescription="Button description here"
+          onClick={simulateLoading3}
+          disabled={timer3}
+        />
+      </div>
+    </>
+  );
+};
+
 export const Secondary = () => {
   return <Button kind="secondary">Button</Button>;
 };
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 6d28d9439ce7..432c35f1670d 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -48,7 +48,6 @@ const Button = React.forwardRef(function Button(
   ref
 ) {
   const [allowTooltipVisibility, setAllowTooltipVisibility] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const tooltipRef = useRef(null);
   const tooltipTimeout = useRef(null);
@@ -62,12 +61,12 @@ const Button = React.forwardRef(function Button(
         node !== evt.currentTarget
       );
     });
+    setAllowTooltipVisibility(false);
   };
 
   const handleFocus = (evt) => {
     if (hasIconOnly) {
       closeTooltips(evt);
-      setIsHovered(!isHovered);
       setIsFocused(true);
       setAllowTooltipVisibility(true);
     }
@@ -75,7 +74,6 @@ const Button = React.forwardRef(function Button(
 
   const handleBlur = () => {
     if (hasIconOnly) {
-      setIsHovered(false);
       setIsFocused(false);
       setAllowTooltipVisibility(false);
     }
@@ -83,7 +81,6 @@ const Button = React.forwardRef(function Button(
 
   const handleMouseEnter = (evt) => {
     if (hasIconOnly) {
-      setIsHovered(true);
       tooltipTimeout.current && clearTimeout(tooltipTimeout.current);
 
       if (evt.target === tooltipRef.current) {
@@ -101,7 +98,6 @@ const Button = React.forwardRef(function Button(
     if (!isFocused && hasIconOnly) {
       tooltipTimeout.current = setTimeout(() => {
         setAllowTooltipVisibility(false);
-        setIsHovered(false);
       }, 100);
     }
   };
@@ -118,7 +114,6 @@ const Button = React.forwardRef(function Button(
     const handleEscKeyDown = (event) => {
       if (matches(event, [keys.Escape])) {
         setAllowTooltipVisibility(false);
-        setIsHovered(false);
       }
     };
     document.addEventListener('keydown', handleEscKeyDown);
@@ -143,7 +138,6 @@ const Button = React.forwardRef(function Button(
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
     [`${prefix}--tooltip--hidden`]: hasIconOnly && !allowTooltipVisibility,
-    [`${prefix}--tooltip--visible`]: isHovered,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost',
     [`${prefix}--tooltip__trigger`]: hasIconOnly,