diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bd92990b9d..d56c574391d 100644 --- 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 index 43ff73cdd36..15f27612721 100644 --- 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 { 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 { componentWillUnmount() { this._isMounted = false; + window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); } componentDidUpdate(prevProps: Props, prevState: State) { @@ -237,18 +238,15 @@ export class EuiToolTip extends Component { } }; - 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) => { @@ -258,9 +256,7 @@ export class EuiToolTip extends Component { 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 { 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