Prevent scroll hide for touch devices

eoghan2t9 · Jun 17, 2020 · 4c30a58 · 4c30a58
1 parent 62da979
commit 4c30a58
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/client/src/components/Logs/Tooltip/index.js b/client/src/components/Logs/Tooltip/index.js
@@ -3,37 +3,34 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import './ReactTooltip.css';
+import { TouchMediaQuery } from '../../../helpers/constants';
 
-class Tooltip extends React.Component {
-    render() {
-        const {
-            id, children, className = '', place = 'right', trigger = 'hover', overridePosition, scrollHide = true,
-        } = this.props;
+const Tooltip = ({
+    id, children, className = '', place = 'right', trigger = 'hover', overridePosition, scrollHide = true,
+}) => {
+    const tooltipClassName = classNames('custom-tooltip', className);
 
-        const tooltipClassName = classNames('custom-tooltip', className);
-
-        return (
-            <ReactTooltip
-                id={id}
-                aria-haspopup="true"
-                effect="solid"
-                place={place}
-                className={tooltipClassName}
-                backgroundColor="#fff"
-                arrowColor="transparent"
-                textColor="#4d4d4d"
-                delayHide={300}
-                scrollHide={scrollHide}
-                trigger={trigger}
-                overridePosition={overridePosition}
-                globalEventOff="click touchend"
-                clickable
-            >
-                {children}
-            </ReactTooltip>
-        );
-    }
-}
+    return (
+        <ReactTooltip
+            id={id}
+            aria-haspopup="true"
+            effect="solid"
+            place={place}
+            className={tooltipClassName}
+            backgroundColor="#fff"
+            arrowColor="transparent"
+            textColor="#4d4d4d"
+            delayHide={300}
+            scrollHide={window.matchMedia(TouchMediaQuery).matches ? false : scrollHide}
+            trigger={trigger}
+            overridePosition={overridePosition}
+            globalEventOff="click touchend"
+            clickable
+        >
+            {children}
+        </ReactTooltip>
+    );
+};
 
 Tooltip.propTypes = {
     id: PropTypes.string.isRequired,

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -503,3 +503,5 @@ export const FORM_NAME = {
 };
 
 export const smallScreenSize = 767;
+
+export const TouchMediaQuery = '(hover: none)';