Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove tooltip focus on mousemove #3335

Merged
merged 14 commits into from
May 28, 2020
Merged

Remove tooltip focus on mousemove #3335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
135529d
Remove tooltip focus on mousemove
adfaris Apr 16, 2020
34cc150
Fix linting error
adfaris Apr 16, 2020
d71f637
Removed the onFocus and onBlur since it is not used
adfaris Apr 21, 2020
e679af3
Added onKeyUp
adfaris Apr 21, 2020
ebf8ab6
Update the CHANGELOG
adfaris May 15, 2020
d425bd1
Remove tooltip focus on mousemove
adfaris Apr 16, 2020
ea1a6fa
Removed the onFocus and onBlur since it is not used
adfaris Apr 21, 2020
3706f08
cl
May 15, 2020
a6f9fbd
cl
May 15, 2020
4992a90
Fixed the tooltip issue based feedback
adfaris May 21, 2020
8a09ef7
Add removeEventListener to componentWillUnmount
adfaris May 21, 2020
dca4496
Fixed the bug displaying tooltip from keyboad after triggered by the …
adfaris May 22, 2020
c83f471
Merge branch 'master' into tooltip-to-close-with-mouse-move
adfaris May 22, 2020
d9f188e
clean up eslint warning
chandlerprall May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,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))
Expand All @@ -19,6 +21,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))
Expand Down
29 changes: 13 additions & 16 deletions src/components/tool_tip/tool_tip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -115,7 +117,6 @@ export interface Props {

interface State {
visible: boolean;
hasFocus: boolean;
calculatedPosition: ToolTipPositions;
toolTipStyles: ToolTipStyles;
arrowStyles: undefined | { left: number; top: number };
Expand All @@ -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,
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
adfaris marked this conversation as resolved.
Show resolved Hide resolved
};

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>) => {
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand Down