From d1366360f1cbe79bc4866b5c2637bda2b1a7ca70 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 13 Apr 2020 22:25:07 -0400
Subject: [PATCH] removed lodash.debounce, use onmouseleave instead

---
 package.json                               |  1 -
 src/components/info-button/info-button.jsx | 15 +++++---------
 test/unit/components/info-button.test.jsx  | 24 ++++++++--------------
 3 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 4177833f5..eea303d4c 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,6 @@
     "keymirror": "0.1.1",
     "lodash.bindall": "4.4.0",
     "lodash.clone": "3.0.3",
-    "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "3.10.0",
     "lodash.isarray": "3.0.4",
     "lodash.merge": "3.3.2",
diff --git a/src/components/info-button/info-button.jsx b/src/components/info-button/info-button.jsx
index 80e2e0490..92414f47b 100644
--- a/src/components/info-button/info-button.jsx
+++ b/src/components/info-button/info-button.jsx
@@ -2,7 +2,6 @@ const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
 const MediaQuery = require('react-responsive').default;
-const debounce = require('lodash.debounce');
 
 const frameless = require('../../lib/frameless');
 
@@ -13,7 +12,7 @@ class InfoButton extends React.Component {
         super(props);
         bindAll(this, [
             'handleClick',
-            'handleMouseOut',
+            'handleMouseLeave',
             'handleShowMessage',
             'setButtonRef'
         ]);
@@ -21,7 +20,6 @@ class InfoButton extends React.Component {
             requireClickToClose: false, // default to closing on mouseout
             visible: false
         };
-        this.setVisibleWithDebounce = debounce(this.setVisible, 100);
     }
     componentWillMount () {
         window.addEventListener('mousedown', this.handleClick, false);
@@ -41,20 +39,17 @@ class InfoButton extends React.Component {
             });
         }
     }
-    handleMouseOut () {
+    handleMouseLeave () {
         if (this.state.visible && !this.state.requireClickToClose) {
-            this.setVisibleWithDebounce(false);
+            this.setState({visible: false});
         }
     }
     handleShowMessage () {
-        this.setVisibleWithDebounce(true);
+        this.setState({visible: true});
     }
     setButtonRef (element) {
         this.buttonRef = element;
     }
-    setVisible (newVisibleState) {
-        this.setState({visible: newVisibleState});
-    }
     render () {
         const messageJsx = this.state.visible && (
             <div className="info-button-message">
@@ -66,7 +61,7 @@ class InfoButton extends React.Component {
                 <div
                     className="info-button"
                     ref={this.setButtonRef}
-                    onMouseOut={this.handleMouseOut}
+                    onMouseLeave={this.handleMouseLeave}
                     onMouseOver={this.handleShowMessage}
                 >
                     <MediaQuery minWidth={frameless.desktop}>
diff --git a/test/unit/components/info-button.test.jsx b/test/unit/components/info-button.test.jsx
index 84f4fcb26..959e4208f 100644
--- a/test/unit/components/info-button.test.jsx
+++ b/test/unit/components/info-button.test.jsx
@@ -68,8 +68,8 @@ describe('InfoButton', () => {
         expect(component.find('div.info-button').exists()).toEqual(true);
         expect(component.find('div.info-button-message').exists()).toEqual(true);
 
-        // mouseOut from info button
-        component.find('div.info-button').simulate('mouseOut');
+        // mouseLeave from info button
+        component.find('div.info-button').simulate('mouseLeave');
         setTimeout(function () { // necessary because mouseover uses debounce
             component.update();
             expect(component.find('div.info-button-message').exists()).toEqual(true);
@@ -117,7 +117,7 @@ describe('InfoButton', () => {
         expect(component.find('div.info-button-message').exists()).toEqual(false);
     });
 
-    test('after message is visible, mouseOut makes it vanish', done => {
+    test('after message is visible, mouseLeave makes it vanish', () => {
         const component = mountWithIntl(
             <InfoButton
                 message="Here is some info about something!"
@@ -126,18 +126,12 @@ describe('InfoButton', () => {
 
         // mouseOver info button
         component.find('div.info-button').simulate('mouseOver');
-        setTimeout(function () { // necessary because mouseover uses debounce
-            component.update();
-            expect(component.find('div.info-button-message').exists()).toEqual(true);
+        component.update();
+        expect(component.find('div.info-button-message').exists()).toEqual(true);
 
-            // mouseOut away from info button
-            component.find('div.info-button').simulate('mouseOut');
-            setTimeout(function () { // necessary because mouseover uses debounce
-                component.update();
-                expect(component.find('div.info-button-message').exists()).toEqual(false);
-                done();
-            }, 500);
-
-        }, 500);
+        // mouseLeave away from info button
+        component.find('div.info-button').simulate('mouseLeave');
+        component.update();
+        expect(component.find('div.info-button-message').exists()).toEqual(false);
     });
 });