From 07d25be8c2876b9695976482c48c7e5a8462aa9c Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Thu, 16 Apr 2020 12:11:15 -0400 Subject: [PATCH 01/10] Remove tooltip focus on mousemove --- src/components/tool_tip/tool_tip.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index ba2cc550857f..b7ccf0b0943a 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -214,7 +214,7 @@ export class EuiToolTip extends Component { hideToolTip = () => { if (this._isMounted) { - this.setState({ visible: false }); + this.setState({ visible: false, hasFocus: false }); } }; @@ -223,6 +223,7 @@ export class EuiToolTip extends Component { hasFocus: true, }); this.showToolTip(); + window.addEventListener('mousemove', this.hasFocusMouseMoveListener); }; onBlur = () => { @@ -232,6 +233,11 @@ export class EuiToolTip extends Component { this.hideToolTip(); }; + hasFocusMouseMoveListener = () => { + this.hideToolTip(); + window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); + } + onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has // left the anchor for a non-child. @@ -309,8 +315,8 @@ export class EuiToolTip extends Component { * element has focus. */} {cloneElement(children, { - onFocus: this.showToolTip, - onBlur: this.hideToolTip, + onFocus: this.onFocus, + onBlur: this.onBlur, ...(visible && { 'aria-describedby': this.state.id }), })} From fef3f0a0d2e6f0833a8b3a49d1d8b9da6c47e26f Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Thu, 16 Apr 2020 16:20:14 -0400 Subject: [PATCH 02/10] Fix linting error --- src/components/tool_tip/tool_tip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index b7ccf0b0943a..abf944091d12 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -236,7 +236,7 @@ export class EuiToolTip extends Component { hasFocusMouseMoveListener = () => { this.hideToolTip(); window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); - } + }; onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has From cae532ea7ad32eefadd4c9d81a3cafa44f851593 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Tue, 21 Apr 2020 14:03:51 -0400 Subject: [PATCH 03/10] Removed the onFocus and onBlur since it is not used --- src/components/tool_tip/tool_tip.tsx | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index abf944091d12..5ee66a71e24a 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -218,26 +218,17 @@ export class EuiToolTip extends Component { } }; - onFocus = () => { - this.setState({ - hasFocus: true, - }); - this.showToolTip(); - window.addEventListener('mousemove', this.hasFocusMouseMoveListener); - }; - - onBlur = () => { - this.setState({ - hasFocus: false, - }); - this.hideToolTip(); - }; - hasFocusMouseMoveListener = () => { this.hideToolTip(); window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); }; + onKeyUp = (e: { keyCode: number }) => { + if (e.keyCode === 9) { + window.addEventListener('mousemove', this.hasFocusMouseMoveListener); + } + }; + onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has // left the anchor for a non-child. @@ -315,8 +306,8 @@ export class EuiToolTip extends Component { * element has focus. */} {cloneElement(children, { - onFocus: this.onFocus, - onBlur: this.onBlur, + onFocus: this.showToolTip, + onBlur: this.hideToolTip, ...(visible && { 'aria-describedby': this.state.id }), })} From 13ae3f8f5d2e091e316c9628bf2a4eaede9a6032 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Tue, 21 Apr 2020 14:11:03 -0400 Subject: [PATCH 04/10] Added onKeyUp --- src/components/tool_tip/tool_tip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index 5ee66a71e24a..18570fc46222 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -296,7 +296,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 From 2e98f5605d8850907cf2f744223691d4c3ae9146 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Fri, 15 May 2020 10:31:10 -0400 Subject: [PATCH 05/10] Update the CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 002c871251a7..a89c15cea4be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ **Bug Fixes** +- Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335)) - Fixed EuiI8n hasPropName utility errors on null values ([#3303](https://github.com/elastic/eui/pull/3303)) - Fixed the inline styles being overwritten by consumer-passed inline styles in EuiBadge ([#3284](https://github.com/elastic/eui/pull/3284)) From 9fe2ef24f69aef709cc583fe8e7e424fa0639025 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Thu, 16 Apr 2020 12:11:15 -0400 Subject: [PATCH 06/10] Remove tooltip focus on mousemove --- src/components/tool_tip/tool_tip.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index 43ff73cdd364..3582959427db 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -233,7 +233,7 @@ export class EuiToolTip extends Component { hideToolTip = () => { if (this._isMounted) { - this.setState({ visible: false }); + this.setState({ visible: false, hasFocus: false }); } }; @@ -242,6 +242,7 @@ export class EuiToolTip extends Component { hasFocus: true, }); this.showToolTip(); + window.addEventListener('mousemove', this.hasFocusMouseMoveListener); }; onBlur = () => { @@ -251,6 +252,11 @@ export class EuiToolTip extends Component { this.hideToolTip(); }; + hasFocusMouseMoveListener = () => { + this.hideToolTip(); + window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); + } + onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has // left the anchor for a non-child. @@ -328,8 +334,8 @@ export class EuiToolTip extends Component { * element has focus. */} {cloneElement(children, { - onFocus: this.showToolTip, - onBlur: this.hideToolTip, + onFocus: this.onFocus, + onBlur: this.onBlur, ...(visible && { 'aria-describedby': this.state.id }), })} From ea9f6626c963ff1b20315916248556d955823e45 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Thu, 16 Apr 2020 16:20:14 -0400 Subject: [PATCH 07/10] Fix linting error --- src/components/tool_tip/tool_tip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index 3582959427db..c3e6712d1916 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -255,7 +255,7 @@ export class EuiToolTip extends Component { hasFocusMouseMoveListener = () => { this.hideToolTip(); window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); - } + }; onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has From c726a31749ef51781ebc8623d3e6cf0997ab76ad Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Tue, 21 Apr 2020 14:03:51 -0400 Subject: [PATCH 08/10] Removed the onFocus and onBlur since it is not used --- src/components/tool_tip/tool_tip.tsx | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index c3e6712d1916..558a0164b6f1 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -237,26 +237,17 @@ export class EuiToolTip extends Component { } }; - onFocus = () => { - this.setState({ - hasFocus: true, - }); - this.showToolTip(); - window.addEventListener('mousemove', this.hasFocusMouseMoveListener); - }; - - onBlur = () => { - this.setState({ - hasFocus: false, - }); - this.hideToolTip(); - }; - hasFocusMouseMoveListener = () => { this.hideToolTip(); window.removeEventListener('mousemove', this.hasFocusMouseMoveListener); }; + onKeyUp = (e: { keyCode: number }) => { + if (e.keyCode === 9) { + window.addEventListener('mousemove', this.hasFocusMouseMoveListener); + } + }; + onMouseOut = (e: ReactMouseEvent) => { // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has // left the anchor for a non-child. @@ -334,8 +325,8 @@ export class EuiToolTip extends Component { * element has focus. */} {cloneElement(children, { - onFocus: this.onFocus, - onBlur: this.onBlur, + onFocus: this.showToolTip, + onBlur: this.hideToolTip, ...(visible && { 'aria-describedby': this.state.id }), })} From c2d3bd524401296d6bb7c8cf1c90634dea119540 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Tue, 21 Apr 2020 14:11:03 -0400 Subject: [PATCH 09/10] Added onKeyUp --- src/components/tool_tip/tool_tip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx index 558a0164b6f1..0007739630f0 100644 --- a/src/components/tool_tip/tool_tip.tsx +++ b/src/components/tool_tip/tool_tip.tsx @@ -315,7 +315,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 From 985923ae69011380f36849f4f5fcdda06d386818 Mon Sep 17 00:00:00 2001 From: "A.D.Faris" Date: Fri, 15 May 2020 10:31:10 -0400 Subject: [PATCH 10/10] Update the CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d8febdeb020c..c22e9c827b58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -60,6 +60,7 @@ **Bug Fixes** +- Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335)) - Fixed EuiI8n hasPropName utility errors on null values ([#3303](https://github.com/elastic/eui/pull/3303)) - Fixed the inline styles being overwritten by consumer-passed inline styles in EuiBadge ([#3284](https://github.com/elastic/eui/pull/3284))