fix(button): conflicting hover state

carbon-design-system · Aug 19, 2021 · 7051081 · 7051081
1 parent 7d5667a
commit 7051081
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 8 deletions.
diff --git 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
@@ -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,28 +61,26 @@ const Button = React.forwardRef(function Button(
         node !== evt.currentTarget
       );
     });
+    setAllowTooltipVisibility(false);
   };
 
   const handleFocus = (evt) => {
     if (hasIconOnly) {
       closeTooltips(evt);
-      setIsHovered(!isHovered);
       setIsFocused(true);
       setAllowTooltipVisibility(true);
     }
   };
 
   const handleBlur = () => {
     if (hasIconOnly) {
-      setIsHovered(false);
       setIsFocused(false);
       setAllowTooltipVisibility(false);
     }
   };
 
   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,