From aa4eae6b99a6081afabf180d02fa0a8b0cb1b3ab Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Tue, 5 Mar 2024 11:42:10 +0000
Subject: [PATCH] fix[devtools/tree/element]: onClick -> onMouseDown to handle
 first click correctly (#28486)

There is a weird behaviour in all shells of RDT: when user opens
`Components` tab and scrolls down a tree (without any prior click or
focus event), and then clicks on some element, the `click` event will
not be fired. Because `click` event hasn't been fired, the `focus` event
is fired for the whole list and we pre-select the first (root) element
in the tree:

https://github.com/facebook/react/blob/034130c02ffb47b0026059b57d17e9b080976ff3/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L217-L226

Check the demo (before) what is happening. I don't know exactly why
`click` event is not fired there, but it only happens:
1. For elements, which were not previously rendered (for virtualization
purposes).
2. When HTML-element (div), which represents the container for the tree
was not focused previously.

Unlike the `click` event, the `mousedown` event is fired consistently.

### Before


https://github.com/facebook/react/assets/28902667/9f3ad75d-55d0-4c99-b2d0-ead63a120ea0

### After



https://github.com/facebook/react/assets/28902667/e34816be-644c-444c-8e32-562a79494e44


Tested that it works in all shells, including the select / deselect
features (with `metaKey` param in event).
---
 .../__tests__/__e2e__/devtools-utils.js                      | 5 ++++-
 .../src/devtools/views/Components/Element.js                 | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js b/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
index ca59fa3d914e2..333b47309a3c9 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
@@ -37,7 +37,10 @@ async function selectElement(page, displayName, waitForOwnersText) {
       createTestNameSelector('ComponentTreeListItem'),
       createTextSelector(listItemText),
     ])[0];
-    listItem.click();
+
+    listItem.dispatchEvent(
+      new MouseEvent('mousedown', {bubbles: true, cancelable: true})
+    );
   }, displayName);
 
   if (waitForOwnersText) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index f6a68b652ca5c..f5c30d2d2b0d6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -142,7 +142,7 @@ export default function Element({data, index, style}: Props): React.Node {
       className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
+      onMouseDown={handleClick}
       onDoubleClick={handleDoubleClick}
       style={style}
       data-testname="ComponentTreeListItem"