Remove tooltip focus on mousemove (#3335)

* Remove tooltip focus on mousemove * Fix linting error * Removed the onFocus and onBlur since it is not used * Added onKeyUp * Update the CHANGELOG * Remove tooltip focus on mousemove * Removed the onFocus and onBlur since it is not used * cl * cl * Fixed the tooltip issue based feedback * Add removeEventListener to componentWillUnmount * Fixed the bug displaying tooltip from keyboad after triggered by the mouse * clean up eslint warning Co-authored-by: cchaos <[email protected]> Co-authored-by: Chandler Prall <[email protected]>
elastic · May 28, 2020 · fd3dd84 · fd3dd84
1 parent d1f0fc2
commit fd3dd84
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@
 
 **Bug Fixes**
 
+
+- Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335))
 - Fixed `EuiSuperSelect` not rendering full width when `isOpen` is `true` ([#3495](https://github.com/elastic/eui/pull/3495))
 - Fixed `EuiBasicTable` shows no items if all items of last page is deleted  ([#3422](https://github.com/elastic/eui/pull/3422))
 - Fixed TypeScript module name in generated `eui_charts_theme.d.ts` file  ([#3492](https://github.com/elastic/eui/pull/3492))
@@ -22,6 +24,7 @@
 
 - Removed `src-framer` files from the repository ([#3487](https://github.com/elastic/eui/pull/3487))
 
+
 ## [`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))

diff --git a/src/components/tool_tip/tool_tip.tsx b/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.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -237,18 +238,15 @@ 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);
+    }
   };
 
   onMouseOut = (e: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
@@ -258,9 +256,7 @@ export class EuiToolTip extends Component<Props, State> {
       this.anchor === e.relatedTarget ||
       (this.anchor != null && !this.anchor.contains(e.relatedTarget as Node))
     ) {
-      if (!this.state.hasFocus) {
-        this.hideToolTip();
-      }
+      this.hideToolTip();
     }
 
     if (this.props.onMouseOut) {
@@ -318,7 +314,8 @@ export class EuiToolTip extends Component<Props, State> {
         ref={anchor => (this.anchor = anchor)}
         className={anchorClasses}
         onMouseOver={this.showToolTip}
-        onMouseOut={this.onMouseOut}>
+        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