mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
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:
034130c02f/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).
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user