set hover status to false on blur

Expensify · Jan 17, 2023 · 3c6609a · 3c6609a
1 parent 6902b94
commit 3c6609a
Showing 1 changed file with 10 additions and 23 deletions.
diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
@@ -16,13 +16,9 @@ class Hoverable extends Component {
         };
 
         this.wrapperView = null;
-
-        this.resetHoverStateOnOutsideClick = this.resetHoverStateOnOutsideClick.bind(this);
     }
 
     componentDidMount() {
-        document.addEventListener('mousedown', this.resetHoverStateOnOutsideClick);
-
         // we like to Block the hover on touch devices but we keep it for Hybrid devices so
         // following logic blocks hover on touch devices.
         this.disableHover = () => {
@@ -38,7 +34,6 @@ class Hoverable extends Component {
     }
 
     componentWillUnmount() {
-        document.removeEventListener('mousedown', this.resetHoverStateOnOutsideClick);
         document.removeEventListener('touchstart', this.disableHover);
         document.removeEventListener('touchmove', this.enableHover);
     }
@@ -59,24 +54,6 @@ class Hoverable extends Component {
         }
     }
 
-    /**
-     * If the user clicks outside this component, we want to make sure that the hover state is set to false.
-     * There are some edge cases where the mouse can leave the component without the `onMouseLeave` event firing,
-     * leaving this Hoverable in the incorrect state.
-     * One such example is when a modal is opened while this component is hovered, and you click outside the component
-     * to close the modal.
-     *
-     * @param {Object} event - A click event
-     */
-    resetHoverStateOnOutsideClick(event) {
-        if (!this.state.isHovered) {
-            return;
-        }
-        if (this.wrapperView && !this.wrapperView.contains(event.target)) {
-            this.setIsHovered(false);
-        }
-    }
-
     render() {
         if (this.props.absolute && React.isValidElement(this.props.children)) {
             return React.cloneElement(React.Children.only(this.props.children), {
@@ -107,6 +84,15 @@ class Hoverable extends Component {
                         onMouseLeave(el);
                     }
                 },
+                onBlur: (el) => {
+                    this.setIsHovered(false);
+
+                    // Call the original onBlur, if any
+                    const {onBlur} = this.props.children;
+                    if (_.isFunction(onBlur)) {
+                        onBlur(el);
+                    }
+                },
             });
         }
         return (
@@ -115,6 +101,7 @@ class Hoverable extends Component {
                 ref={el => this.wrapperView = el}
                 onMouseEnter={() => this.setIsHovered(true)}
                 onMouseLeave={() => this.setIsHovered(false)}
+                onBlur={() => this.setIsHovered(false)}
             >
                 { // If this.props.children is a function, call it to provide the hover state to the children.
                     _.isFunction(this.props.children)