From f8f475d2477bdcde43e81a90200d1a963b9784f2 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 24 Mar 2021 23:49:16 +0530 Subject: [PATCH 1/2] fix: tooltip shows up on mobile Web while navgating the reports --- src/components/Hoverable/index.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index c67b26c3f2de..40a429717a20 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -22,10 +22,25 @@ class Hoverable extends Component { componentDidMount() { document.addEventListener('mousedown', this.resetHoverStateOnOutsideClick); + + // we like to Block the hover on touch devices but we keep it for Hybrid devices so + // following logic blocks hover on touch devices. + this.touchStartListener = () => { + this.hoverDisabled = true; + }; + this.touchEndListener = () => { + this.hoverDisabled = false; + }; + document.addEventListener('touchstart', this.touchStartListener); + + // Remember Touchend fires before `mouse` events so we have to use alternative. + document.addEventListener('touchmove', this.touchEndListener); } componentWillUnmount() { document.removeEventListener('mousedown', this.resetHoverStateOnOutsideClick); + document.removeEventListener('touchstart', this.touchStartListener); + document.removeEventListener('touchmove', this.touchEndListener); } /** @@ -34,9 +49,14 @@ class Hoverable extends Component { * @param {Boolean} isHovered - Whether or not this component is hovered. */ setIsHovered(isHovered) { - if (isHovered !== this.state.isHovered) { + if (isHovered !== this.state.isHovered && !(isHovered && this.hoverDisabled)) { this.setState({isHovered}, isHovered ? this.props.onHoverIn : this.props.onHoverOut); } + + // we reset the Hover block in case touchmove was not first after touctstart + if (!isHovered) { + this.hoverDisabled = false; + } } /** From 15d89dc4cda926592ac664e0ebc15e1c899622ac Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 25 Mar 2021 00:13:19 +0530 Subject: [PATCH 2/2] chg: naming --- src/components/Hoverable/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 40a429717a20..a2eb6916442e 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -25,22 +25,22 @@ class Hoverable extends Component { // we like to Block the hover on touch devices but we keep it for Hybrid devices so // following logic blocks hover on touch devices. - this.touchStartListener = () => { + this.disableHover = () => { this.hoverDisabled = true; }; - this.touchEndListener = () => { + this.enableHover = () => { this.hoverDisabled = false; }; - document.addEventListener('touchstart', this.touchStartListener); + document.addEventListener('touchstart', this.disableHover); // Remember Touchend fires before `mouse` events so we have to use alternative. - document.addEventListener('touchmove', this.touchEndListener); + document.addEventListener('touchmove', this.enableHover); } componentWillUnmount() { document.removeEventListener('mousedown', this.resetHoverStateOnOutsideClick); - document.removeEventListener('touchstart', this.touchStartListener); - document.removeEventListener('touchmove', this.touchEndListener); + document.removeEventListener('touchstart', this.disableHover); + document.removeEventListener('touchmove', this.enableHover); } /**