Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "Remove tooltip focus on mousemove (elastic#3335)"
Browse files Browse the repository at this point in the history
This reverts commit fd3dd84.

# Conflicts:
#	CHANGELOG.md
#	src/components/tool_tip/tool_tip.tsx
cchaos committed Aug 19, 2021
1 parent 0a9857d commit 9090925
Showing 2 changed files with 17 additions and 16 deletions.
1 change: 0 additions & 1 deletion src/components/code/__snapshots__/code_block.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -185,7 +185,6 @@ console.log(some);"
>
<span
className="euiToolTipAnchor"
onKeyUp={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
32 changes: 17 additions & 15 deletions src/components/tool_tip/tool_tip.tsx
Original file line number Diff line number Diff line change
@@ -13,15 +13,14 @@ import React, {
ReactElement,
ReactNode,
MouseEvent as ReactMouseEvent,
KeyboardEvent,
} from 'react';
import classNames from 'classnames';

import { keysOf } from '../common';
import { EuiPortal } from '../portal';
import { EuiToolTipPopover } from './tool_tip_popover';
import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
import { enqueueStateChange } from '../../services/react';
import { findPopoverPosition, htmlIdGenerator } from '../../services';

import { EuiResizeObserver } from '../observer/resize_observer';

@@ -116,6 +115,7 @@ export interface EuiToolTipProps {

interface State {
visible: boolean;
hasFocus: boolean;
calculatedPosition: ToolTipPositions;
toolTipStyles: ToolTipStyles;
arrowStyles: undefined | { left: number; top: number };
@@ -130,6 +130,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {

state: State = {
visible: false,
hasFocus: false,
calculatedPosition: this.props.position,
toolTipStyles: DEFAULT_TOOLTIP_STYLES,
arrowStyles: undefined,
@@ -154,7 +155,6 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
componentWillUnmount() {
this.clearAnimationTimeout();
this._isMounted = false;
window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
}

componentDidUpdate(prevProps: EuiToolTipProps, prevState: State) {
@@ -252,15 +252,18 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
});
};

hasFocusMouseMoveListener = () => {
this.hideToolTip();
window.removeEventListener('mousemove', this.hasFocusMouseMoveListener);
onFocus = () => {
this.setState({
hasFocus: true,
});
this.showToolTip();
};

onKeyUp = (event: KeyboardEvent<HTMLSpanElement>) => {
if (event.key === keys.TAB) {
window.addEventListener('mousemove', this.hasFocusMouseMoveListener);
}
onBlur = () => {
this.setState({
hasFocus: false,
});
this.hideToolTip();
};

onMouseOut = (event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => {
@@ -271,7 +274,9 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
(this.anchor != null &&
!this.anchor.contains(event.relatedTarget as Node))
) {
this.hideToolTip();
if (!this.state.hasFocus) {
this.hideToolTip();
}
}

if (this.props.onMouseOut) {
@@ -333,10 +338,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
ref={(anchor) => (this.anchor = anchor)}
className={anchorClasses}
onMouseOver={this.showToolTip}
onMouseOut={this.onMouseOut}
onKeyUp={(event) => {
this.onKeyUp(event);
}}>
onMouseOut={this.onMouseOut}>
{/**
* Re: jsx-a11y/mouse-events-have-key-events
* We apply onFocus, onBlur, etc to the children element because that's the element

0 comments on commit 9090925

Please sign in to comment.