konvajs/react-konva-utils

HTML Component Attempts to Unmount synchronously. React warns about this behaviour.

davesargrad opened this issue · 5 comments

I stumbled on this, when I saw React complaining in my console.
image

The code that is causing problems can be seen here.
image

This is my application code. When I remove the Html component, the synchronous unmount warning goes away.

<Group  
      groupProps={{}} divProps={{}}
      x={iBnds.x}
      y={iBnds.y}
    >
      <Group x={lmp.x} y = {lmp.y}>
        <Html groupProps={{}} divProps={{}}> 
          <FrameItemMenu
            labelMenuControlStyle={sx_menuButton}
            labelMenuControlPanelStyle={labelMenuControlPanelStyle}
            maxFrameItemBackwardPropagationValue={frameId}
            minFrameItemBackwardPropagationValue={0}
            maxFrameItemForwardPropagationValue={totalFrames - frameId - 1}
            minFrameItemForwardPropagationValue={0}
            onDeleteFrameItem={onDeleteFrameItem}
            onFlipToBack={onFlipToBack}
            onFlipToFront={onFlipToFront}
            onPropagateFrameItem={onPropagateFrameItem}
            frameIndex={frameId}
            boxIndex={itemId}
            zIndex={zIndex}
          />
        </Html>
      </Group>
      {
        lockDrag?<></>:
          <Group 
          >
            <FrameItemDragHandle 
                  x={0}
                  y={0}
                  width={iBnds.width}
                  height={iBnds.height}
                  frameWidth={fw}
                  frameHeight={fh}
                  lock={lockDrag}
                  itemBounds={iBnds}
                  onDragStart={() => onDragStart(frameId, itemId)}
                  onDragMove={(nib) => handleDrag(nib)}
                  onDragEnd={(nib) => handleDragEnd(nib)}
                  style={itemStyle.boundary} />
          </Group>
      }
      {
        lockResize?<></>:
        <Group 
        >
          {handles.map((hdl, hidx) => {
            return (
              <FrameItemResizeHandle
                key={hidx} 
                handle={hdl}
                frameWidth={fw}
                frameHeight={fh}
                itemBounds={iBnds}
                onDragStart={() => onResizeStart(frameId, itemId)}
                onDragMove={handleResize}
                onDragEnd={handleResizeEnd}
                style={itemStyle.resizeHandle} />
              )
          })}
        </Group>
      }
    </Group>

@lavrton Per your suggestion on Discord, I've not yet tried to create a small sample that replicates this behavior. I am still seeing this, and will certainly try to find the time to create a small sample.

I do wonder, why is it necessary to explicitly unmount as the Utils HTML component is doing? I dont typically have to do that with react components. See line 82 in picture above "root.unmount()" (also seen below in the current version of the code).

root.unmount();

Heh: #26

Perhaps now I dont need to try to replicate.. Looks like thats been done.

same issue

I can't reproduce the issue. I need a repo to reproduce.

It should be fixed with react-konva-utils@1.0.3.