Behaving as if bounds are set when child is a component?

[cwrichardson]

TBH, this may be as simple as a cut-and-paste error; and it certainly may not be a @use-gesture issue, it may be some React re-rendering stacking-order issue, but I'm stumped.

I have a bunch of draggable things on a page, <ColumnDragCard />. They're wrapped in a div with a useBind hook

<div ...eventHandller>
  <ColumnDragCard />
</div>

When a drag event starts, I open a portal attached to the document body with one of these <ColumnDragCard> objects in it

    const dragObjectPortal = dragState && dragState.pointerStartInfo
        ? createPortal(
          <div style={dragObjectStyle}>
            <div style={dragObjectPositionerStyle} ref={dragBoxRef}>
              <div style={dragObjectHolderStyle} >
                <ColumnDragCard isDragged />
              </div>
              </div>
            </div>,
            document.body
          )
        : null;

and I manually update the position of the object in the portal by setting top and left attributes based on the xy response from the hook, inside of a UseLayoutEffect block.

The problem I'm having is, in the return for the main app, if I use one of my <ColumnDragCard> components inside of the div with the event handler, then useDrag stops reporting pointer updates when the mouse moves outside of the div. BUT, if I manually put (what I believe to be the exact same code) inline in the div with the hook, everything works fine.

Here are examples of it working and not working in codesandbox:

Inline objects (works fine)
Component (appears to be trapped by a bound)

Any help in figuring out what I'm doing wrong here would be much appreciated!
TIA

[dbismut]

Would be nice if you could format and strip the sandbox to its bare minimum. Here I'm struggling to understand the logic since it's polluted with so many external APIs.

[cwrichardson]

Ha! Fair enough. I was just so excited after spending two days simplifying it to a point where I could generate the issue, I thought I already was at a bare minimum :).

Substantially minimised now, also added some comments around the logic, and marked two of the comments with 'XXX' — one where I've added a log so you can see that it stops reporting change in xy in the broken version, and one where the only change between the two versions exists.

works
broken

And thank you so much for looking at this!

[dbismut]

Hey, I'm not sure how you're declaring components. Declaring a component like that inside another component isn't really a best practice.

If I declare the component outside of the <App /> component, it behaves normally. I guess this is more something that React is responsible for rather than this lib.

https://codesandbox.io/s/philolegein-drag-component-forked-b4rd4x

[dbismut]

It's actually an antipattern as you can read here: https://www.reddit.com/r/reactjs/comments/ebtogl/declaring_component_inside_component/fb763sb/

Since the nested component is recreated on every render, it's very likely that it messes up the pointer capture.

[cwrichardson]

Thanks! I'll chase it down from there!