Use mouseleave instead of mouseout for hover events. Fix tooltip flicker

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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>

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}

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}

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>
         );
     }

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>