@samitouri / QOS-React-2 / commits / aa4eae6b99

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).

Ruslan Lesiutin committed Mar 5, 2024 at 11:42 UTC aa4eae6b99a6081afabf180d02fa0a8b0cb1b3ab
2 files changed +5 -2
packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
+4 -1
@@ -37,7 +37,10 @@ async function selectElement(page, displayName, waitForOwnersText) {
37 createTestNameSelector('ComponentTreeListItem'),
38 createTextSelector(listItemText),
39 ])[0];
40 - listItem.click();
40 +
41 + listItem.dispatchEvent(
42 + new MouseEvent('mousedown', {bubbles: true, cancelable: true})
43 + );
44 }, displayName);
45
46 if (waitForOwnersText) {
packages/react-devtools-shared/src/devtools/views/Components/Element.js
+1 -1
@@ -142,7 +142,7 @@ export default function Element({data, index, style}: Props): React.Node {
142 className={className}
143 onMouseEnter={handleMouseEnter}
144 onMouseLeave={handleMouseLeave}
145 - onClick={handleClick}
145 + onMouseDown={handleClick}
146 onDoubleClick={handleDoubleClick}
147 style={style}
148 data-testname="ComponentTreeListItem"