Disable click-to-select on touch devices (use onTouchStart)

WordPress · Mar 21, 2024 · be1856a · be1856a
1 parent 64c4967
commit be1856a
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -249,6 +249,11 @@ function TableRow( {
 		setIsHovered( false );
 	};
 
+	// Will be set to true if `onTouchStart` fires. This happens before
+	// `onClick` and can be used to exclude touchscreen devices from certain
+	// behaviours.
+	const isTouchDevice = useRef( false );
+
 	return (
 		<tr
 			className={ classnames( 'dataviews-view-table__row', {
@@ -258,8 +263,14 @@ function TableRow( {
 			} ) }
 			onMouseEnter={ handleMouseEnter }
 			onMouseLeave={ handleMouseLeave }
+			onTouchStart={ () => {
+				isTouchDevice.current = true;
+			} }
 			onClick={ () => {
-				if ( document.getSelection().type !== 'Range' ) {
+				if (
+					! isTouchDevice.current &&
+					document.getSelection().type !== 'Range'
+				) {
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {