Merge pull request #22925 from bernhardoj/fix/22759

Disable hover on device without hover support
Expensify · Jul 26, 2023 · d0ef241 · d0ef241
2 parents 66b6f37 + dbdbd0e
commit d0ef241
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 22 deletions.
diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {propTypes, defaultProps} from './hoverablePropTypes';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 /**
  * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state,
@@ -21,19 +22,6 @@ class Hoverable extends Component {
     }
 
     componentDidMount() {
-        // 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.disableHover = () => {
-            this.hoverDisabled = true;
-        };
-        this.enableHover = () => {
-            this.hoverDisabled = false;
-        };
-        document.addEventListener('touchstart', this.disableHover);
-
-        // Remember Touchend fires before `mouse` events so we have to use alternative.
-        document.addEventListener('touchmove', this.enableHover);
-
         document.addEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
@@ -48,8 +36,6 @@ class Hoverable extends Component {
     }
 
     componentWillUnmount() {
-        document.removeEventListener('touchstart', this.disableHover);
-        document.removeEventListener('touchmove', this.enableHover);
         document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     }
 
@@ -63,14 +49,9 @@ class Hoverable extends Component {
             return;
         }
 
-        if (isHovered !== this.state.isHovered && !(isHovered && this.hoverDisabled)) {
+        if (isHovered !== this.state.isHovered) {
             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;
-        }
     }
 
     handleVisibilityChange() {
@@ -91,6 +72,10 @@ class Hoverable extends Component {
             child = child(this.state.isHovered);
         }
 
+        if (!DeviceCapabilities.hasHoverSupport()) {
+            return child;
+        }
+
         return React.cloneElement(React.Children.only(child), {
             ref: (el) => {
                 this.wrapperView = el;

diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.js b/src/libs/DeviceCapabilities/hasHoverSupport/index.js
@@ -4,7 +4,7 @@
  * @returns {Boolean}
  */
 function hasHoverSupport() {
-    return !window.matchMedia('(hover: none)').matches;
+    return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
 }
 
 export default hasHoverSupport;