Skip to content

Commit

Permalink
fix[devtools/tree/element]: onClick -> onMouseDown to handle first cl…
Browse files Browse the repository at this point in the history
…ick 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).

DiffTrain build for commit aa4eae6.
  • Loading branch information
hoxyq committed Mar 5, 2024
1 parent ed524df commit 35a4e33
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25733,7 +25733,7 @@ if (__DEV__) {
return root;
}

var ReactVersion = "18.3.0-canary-0ae2b1341-20240304";
var ReactVersion = "18.3.0-canary-aa4eae6b9-20240305";

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9173,7 +9173,7 @@ var devToolsConfig$jscomp$inline_1014 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-0ae2b1341-20240304",
version: "18.3.0-canary-aa4eae6b9-20240305",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1195 = {
Expand Down Expand Up @@ -9204,7 +9204,7 @@ var internals$jscomp$inline_1195 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-0ae2b1341-20240304"
reconcilerVersion: "18.3.0-canary-aa4eae6b9-20240305"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1196 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9601,7 +9601,7 @@ var devToolsConfig$jscomp$inline_1056 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-0ae2b1341-20240304",
version: "18.3.0-canary-aa4eae6b9-20240305",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1236 = {
Expand Down Expand Up @@ -9632,7 +9632,7 @@ var internals$jscomp$inline_1236 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-0ae2b1341-20240304"
reconcilerVersion: "18.3.0-canary-aa4eae6b9-20240305"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1237 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ if (__DEV__) {
}
var dynamicFlags = require("ReactNativeInternalFeatureFlags");

var ReactVersion = "18.3.0-canary-0ae2b1341-20240304";
var ReactVersion = "18.3.0-canary-aa4eae6b9-20240305";

// ATTENTION
// When adding new symbols to this file,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -598,4 +598,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-0ae2b1341-20240304";
exports.version = "18.3.0-canary-aa4eae6b9-20240305";
Original file line number Diff line number Diff line change
Expand Up @@ -594,7 +594,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-0ae2b1341-20240304";
exports.version = "18.3.0-canary-aa4eae6b9-20240305";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0ae2b13412e0e4cf10a799ec645035213834556c
aa4eae6b99a6081afabf180d02fa0a8b0cb1b3ab

0 comments on commit 35a4e33

Please sign in to comment.