Skip to content

Commit 06d0b89

Browse files
authored
[DevTools] Enable pointEvents while scrolling (#30560)
[`react-window` disables `pointerEvents` while scrolling meaning you can't click anything while scrolling.](bvaughn/react-window#128). This means that the first click when you stop the scroll with inertial scrolling doesn't get registered. This is suuuper annoying. This might make sense when you click to stop on a more intentional UI but it doesn't makes sense in a list like this because we eagerly click things even on mousedown. This PR just override that to re-enable pointer events. Supposedly this is done for performance but that might be outdated knowledge. I haven't observed any difference so far. If we discover that it's a perf problem, there's another technique we can use where we call `ownerDocument.elementFromPoint(e.pageX, e.pageY)` and then dispatch the event against that element. But let's try the simplest approach first?
1 parent 4ea12a1 commit 06d0b89

File tree

1 file changed

+4
-1
lines changed
  • packages/react-devtools-shared/src/devtools/views/Components

1 file changed

+4
-1
lines changed

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -586,7 +586,10 @@ function InnerElementType({children, style}) {
586586
// A lot of options were considered; this seemed the one that requires the least code.
587587
// See https://github.com/bvaughn/react-devtools-experimental/issues/9
588588
return (
589-
<div className={styles.InnerElementType} ref={divRef} style={style}>
589+
<div
590+
className={styles.InnerElementType}
591+
ref={divRef}
592+
style={{...style, pointerEvents: null}}>
590593
<SelectedTreeHighlight />
591594
{children}
592595
</div>

0 commit comments

Comments
 (0)