Remove tooltip focus on mousemove

CHANGELOG.md

@@ -4,6 +4,10 @@
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))
 
+**Bug Fixes**
+
+- Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335))
+
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 
 - Added `null` as acceptable `icon` prop for `EuiCard` ([#3470](https://github.com/elastic/eui/pull/3470))

src/components/tool_tip/tool_tip.tsx

@@ -32,6 +32,8 @@ import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
 
+import { TAB } from '../../services/key_codes';
+
 import { EuiResizeObserver } from '../observer/resize_observer';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
@@ -115,7 +117,6 @@ export interface Props {
 
 interface State {
   visible: boolean;
-  hasFocus: boolean;
   calculatedPosition: ToolTipPositions;
   toolTipStyles: ToolTipStyles;
   arrowStyles: undefined | { left: number; top: number };
@@ -129,7 +130,6 @@ export class EuiToolTip extends Component<Props, State> {
 
   state: State = {
     visible: false,
-    hasFocus: false,
     calculatedPosition: this.props.position,
     toolTipStyles: DEFAULT_TOOLTIP_STYLES,
     arrowStyles: undefined,
@@ -147,6 +147,7 @@ export class EuiToolTip extends Component<Props, State> {
 
   componentWillUnmount() {
     this._isMounted = false;
+    window.addEventListener('mousemove', this.hasFocusMouseMoveListener);
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -237,30 +238,35 @@ export class EuiToolTip extends Component<Props, State> {
     }
   };
 
-  onFocus = () => {
-    this.setState({
-      hasFocus: true,
-    });
-    this.showToolTip();
+  hasFocusMouseMoveListener = () => {
+    this.hideToolTip();
+    window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
   };
 
-  onBlur = () => {
-    this.setState({
-      hasFocus: false,
-    });
-    this.hideToolTip();
+  onKeyUp = (e: { keyCode: number }) => {
+    if (e.keyCode === TAB) {
+      window.addEventListener('mousemove', this.hasFocusMouseMoveListener);
+    }
   };
 
+  hideOnTab = (e: { keyCode: number; }) => {
+    if(e.keyCode === TAB) {
+      this.hideToolTip()
+    }
+  }
+  onMouseOver = () => {
+    window.addEventListener('keyup', this.hideOnTab);
+    this.showToolTip();
+  }
+
   onMouseOut = (e: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
     // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
     // left the anchor for a non-child.
     if (
       this.anchor === e.relatedTarget ||
       (this.anchor != null && !this.anchor.contains(e.relatedTarget as Node))
     ) {
-      if (!this.state.hasFocus) {
         this.hideToolTip();
-      }
     }
 
     if (this.props.onMouseOut) {
@@ -317,8 +323,9 @@ export class EuiToolTip extends Component<Props, State> {
       <span
         ref={anchor => (this.anchor = anchor)}
         className={anchorClasses}
-        onMouseOver={this.showToolTip}
-        onMouseOut={this.onMouseOut}>
+        onMouseOver={this.onMouseOver}
+        onMouseOut={this.onMouseOut}
+        onKeyUp={e => this.onKeyUp(e)}>
         {/**
          * Re: jsx-a11y/mouse-events-have-key-events
          * We apply onFocus, onBlur, etc to the children element because that's the element