From e9633b2e3b957f18937344421f28157cfcf02ed3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 18 Jul 2020 12:01:51 +0100
Subject: [PATCH] Use mouseleave instead of mouseout for hover events. Fix
 tooltip flicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/messages/_ReactionsRowButton.scss    |  5 -----
 .../views/elements/AccessibleTooltipButton.tsx     |  9 +++++++--
 src/components/views/elements/TagTile.js           | 14 +++++++++-----
 src/components/views/elements/TextWithTooltip.js   |  4 ++--
 src/components/views/elements/Tooltip.tsx          |  4 ++--
 src/components/views/elements/TooltipButton.js     |  4 ++--
 .../views/messages/ReactionsRowButton.js           |  7 ++++---
 src/components/views/rooms/E2EIcon.js              |  6 +++---
 8 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index fe5b081042..9ba1041421 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -35,11 +35,6 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 
-    // ignore mouse events for all children, treat it as one entire hoverable entity
-    * {
-        pointer-events: none;
-    }
-
     .mx_ReactionsRowButton_content {
         max-width: 100px;
         overflow: hidden;
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index 6bb6f9e529..3546f62359 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -45,7 +45,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
         });
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             hover: false,
         });
@@ -60,7 +60,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
             label={tooltip || title}
         /> : <div />;
         return (
-            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+            <AccessibleButton
+                {...props}
+                onMouseOver={this.onMouseOver}
+                onMouseLeave={this.onMouseLeave}
+                aria-label={title}
+            >
                 { children }
                 { tip }
             </AccessibleButton>
diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js
index 70cdfb7120..2b9d9e5211 100644
--- a/src/components/views/elements/TagTile.js
+++ b/src/components/views/elements/TagTile.js
@@ -29,6 +29,7 @@ import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
 import TagOrderStore from '../../../stores/TagOrderStore';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import AccessibleButton from "./AccessibleButton";
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -114,7 +115,7 @@ export default createReactClass({
         this.setState({ hover: true });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({ hover: false });
     },
 
@@ -151,11 +152,14 @@ export default createReactClass({
             badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
         }
 
-        // FIXME: this ought to use AccessibleButton for a11y but that causes onMouseOut/onMouseOver to fire too much
         const contextButton = this.state.hover || this.props.menuDisplayed ?
-            <div className="mx_TagTile_context_button" onClick={this.openMenu} ref={this.props.contextMenuButtonRef}>
+            <AccessibleButton
+                className="mx_TagTile_context_button"
+                onClick={this.openMenu}
+                ref={this.props.contextMenuButtonRef}
+            >
                 {"\u00B7\u00B7\u00B7"}
-            </div> : <div ref={this.props.contextMenuButtonRef} />;
+            </AccessibleButton> : <div ref={this.props.contextMenuButtonRef} />;
 
         const AccessibleTooltipButton = sdk.getComponent("elements.AccessibleTooltipButton");
 
@@ -168,7 +172,7 @@ export default createReactClass({
             <div
                 className="mx_TagTile_avatar"
                 onMouseOver={this.onMouseOver}
-                onMouseOut={this.onMouseOut}
+                onMouseLeave={this.onMouseLeave}
             >
                 <BaseAvatar
                     name={name}
diff --git a/src/components/views/elements/TextWithTooltip.js b/src/components/views/elements/TextWithTooltip.js
index c46bc3bfbb..0c29e01995 100644
--- a/src/components/views/elements/TextWithTooltip.js
+++ b/src/components/views/elements/TextWithTooltip.js
@@ -37,7 +37,7 @@ export default class TextWithTooltip extends React.Component {
         this.setState({hover: true});
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({hover: false});
     };
 
@@ -45,7 +45,7 @@ export default class TextWithTooltip extends React.Component {
         const Tooltip = sdk.getComponent("elements.Tooltip");
 
         return (
-            <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+            <span onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} className={this.props.class}>
                 {this.props.children}
                 <Tooltip
                     label={this.props.tooltip}
diff --git a/src/components/views/elements/Tooltip.tsx b/src/components/views/elements/Tooltip.tsx
index 9b1e0c8350..c0b85649aa 100644
--- a/src/components/views/elements/Tooltip.tsx
+++ b/src/components/views/elements/Tooltip.tsx
@@ -26,7 +26,7 @@ const MIN_TOOLTIP_HEIGHT = 25;
 
 interface IProps {
         // Class applied to the element used to position the tooltip
-        className: string;
+        className?: string;
         // Class applied to the tooltip itself
         tooltipClassName?: string;
         // Whether the tooltip is visible or hidden.
@@ -120,7 +120,7 @@ export default class Tooltip extends React.Component<IProps> {
     public render() {
         // Render a placeholder
         return (
-            <div className={this.props.className} >
+            <div className={this.props.className}>
             </div>
         );
     }
diff --git a/src/components/views/elements/TooltipButton.js b/src/components/views/elements/TooltipButton.js
index a32044873b..5c8d53fbcc 100644
--- a/src/components/views/elements/TooltipButton.js
+++ b/src/components/views/elements/TooltipButton.js
@@ -34,7 +34,7 @@ export default createReactClass({
         });
     },
 
-    onMouseOut: function() {
+    onMouseLeave: function() {
         this.setState({
             hover: false,
         });
@@ -48,7 +48,7 @@ export default createReactClass({
             label={this.props.helpText}
         /> : <div />;
         return (
-            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
+            <div className="mx_TooltipButton" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
                 ?
                 { tip }
             </div>
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 09824cd315..bb8d9a3b6e 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -74,7 +74,7 @@ export default class ReactionsRowButton extends React.PureComponent {
         });
     }
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             tooltipVisible: false,
         });
@@ -129,11 +129,12 @@ export default class ReactionsRowButton extends React.PureComponent {
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return <AccessibleButton className={classes}
+        return <AccessibleButton
+            className={classes}
             aria-label={label}
             onClick={this.onClick}
             onMouseOver={this.onMouseOver}
-            onMouseOut={this.onMouseOut}
+            onMouseLeave={this.onMouseLeave}
         >
             <span className="mx_ReactionsRowButton_content" aria-hidden="true">
                 {content}
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index 1ea21bfc9a..d7316f198d 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -66,7 +66,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
     }
 
     const onMouseOver = () => setHover(true);
-    const onMouseOut = () => setHover(false);
+    const onMouseLeave = () => setHover(false);
 
     let tip;
     if (hover && !hideTooltip) {
@@ -78,7 +78,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
             <AccessibleButton
                 onClick={onClick}
                 onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
+                onMouseLeave={onMouseLeave}
                 className={classes}
                 style={style}
             >
@@ -87,7 +87,7 @@ const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip, bordere
         );
     }
 
-    return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+    return <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style}>
         { tip }
     </div>;
 };