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.
The code that is causing problems can be seen here.
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).
react-konva-utils/src/html.tsx
Line 104 in f26049e
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
.