From aa523a3f8824bda462297f10869ff606bb61f667 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 4 Mar 2024 20:26:11 +0100
Subject: [PATCH] Update: Simplify code and use capture events instead of
 pointer events hack. (#59565)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
---
 packages/dataviews/src/style.scss   |  3 ---
 packages/dataviews/src/view-grid.js | 13 +++----------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index cc0d158bbe562..278c4b06de322 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -507,9 +507,6 @@
 	margin-left: $grid-unit-10;
 }
 
-.dataviews-view-grid__card.has-no-pointer-events * {
-	pointer-events: none;
-}
 .dataviews-filter-summary__popover {
 	.components-popover__content {
 		width: 230px;
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 61c37955222aa..0930d0c8521e4 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -15,7 +15,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,7 +35,6 @@ function GridItem( {
 	primaryField,
 	visibleFields,
 } ) {
-	const [ hasNoPointerEvents, setHasNoPointerEvents ] = useState( false );
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
@@ -46,11 +44,11 @@ function GridItem( {
 			key={ id }
 			className={ classnames( 'dataviews-view-grid__card', {
 				'is-selected': hasBulkAction && isSelected,
-				'has-no-pointer-events': hasNoPointerEvents,
 			} ) }
-			onMouseDown={ ( event ) => {
+			onClickCapture={ ( event ) => {
 				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
-					setHasNoPointerEvents( true );
+					event.stopPropagation();
+					event.preventDefault();
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -74,11 +72,6 @@ function GridItem( {
 					}
 				}
 			} }
-			onClick={ () => {
-				if ( hasNoPointerEvents ) {
-					setHasNoPointerEvents( false );
-				}
-			} }
 		>
 			<div className="dataviews-view-grid__media">
 				{ mediaField?.render( { item } ) }