[DevTools Bug]: Component tree panel becomes unresponsive after clicking on a few components

[Aaron-Ennis]

Website or app

Multiple; but you can check at https://react-bootstrap.github.io/

Repro steps

1. Access a website in Chrome that uses React.
2. Open Chrome Developer Tools
3. Open the React Developer Tools Components tab/panel
4. Click on 5 - 10 components in the component tree individually to inspect them

Notes:

• This started happening on all React-based websites after updating to Chrome Version 102.0.5005.61 on my work MacBook (x86_64) and my personal MacBook (arm64). Reverting back to Chrome 100 seems to help.
• I had a co-worker test as well, with the same result.
• You can still select individual components using the picker, even after the panel locks up.
• The lock-up seems to happen quicker when Expand component tree by default is selected in the Components tab in the panel settings, but will still lock up if you manually expand enough components.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.24.6 (5/12/2022)

Error message (automated)

None

Error call stack (automated)

N/A

Error component stack (automated)

N/A

GitHub query string (automated)

N/A

[gomo-psivarh]

Same problem here.

Chrome version 102.0.5005.62 on Windows 10

[cham11ng]

Facing the same problem.
(Version 102.0.5005.61 (Official Build) (64-bit).

[cike8899]

Facing the same problem.
(Version 102.0.5005.61 (Official Build) (64-bit) on Mac.

[mondaychen]

I can reproduce this issue on Chrome Canary (v104) but not on v101. Not sure what has changed on Chrome since v102.
@bvaughn can you help investigate?

[bvaughn]

Probably not any time soon. I'm pretty swamped at the moment.

[jennazee]

I found that the unresponsiveness happens after scrolling, and that inspecting the flamegraph container itself and removing pointer-events: none from the <svg> makes it responsive again. I don't have the bandwidth to do the fix, but from the source I see in the extension, this might get thrown on the container while scrolling, so something is maybe making it think we're still scrolling? Hopefully someone can take this and run with it!

Editing to add that I also tried the version from March 30th via a CRX and it had the same issue in Chrome 102, so not a recent change. As @mondaychen points out, perhaps an interaction with new Chrome?

[Aaron-Ennis]

@jennazee Good catch re: scrolling. I can click around in the component tree to my heart's content, as long as I don't scroll in the component tree panel.

[mondaychen]

Thanks @jennazee and @Aaron-Ennis. Yes, I think this is related to scrolling. The component panel uses a <FixedSizeList> from react-window, which sets pointerEvents to none when scrolling.
https://github.com/bvaughn/react-window/blob/master/src/createListComponent.js#L365
My guess is that for some reason the isScrolling state is no longer correctly set back to false

[mondaychen]

It's quite strange that when I'm testing the inline version of devtools, this issue does not exist. This might be an extension-only issue.
Before we figure this out and release a fix, if you've already upgraded to Chrome v102 or above, as far as I know it would not be easy to downgrade. You can consider use Firefox for now, or use the standalone DevTools app