onResize increases value only by one-two pixels at once
Closed this issue · 1 comments
MaxiFilippov commented
When I try to increase size with onResize it increases size only on one-two pixels at once no more, console.log shows width 1 or 2. With library react-resizable same problem. With onResizeStop everythin works fine.
function onResize(w: any, index: number, id: string, rObj: any){
let rObjCopy: any = [...leafs]
updateBoardLeaf(index, w.width)
};
<Rnd dragHandleClassName="handle1" onDrag={updateXarrow} default={{
x: left,
y: top,
width: rObj[index].width,
height: rObj[index].height,
}} onStop={(event: any, data: any) => {
console.log(event, data)
updateXarrow();
}}
size={{ width: rObj[index].width, height: rObj[index].height }}
onResize={(event: any, e: any, d: any, w: any)=>{onResize(w, index, id, rObj)}}
>
<div id={id} style={{width: rObj[index].width, height: rObj[index].height}} className="box-border whitespace-pre-wrap break-words leading-[1.5px] absolute z-5 bg-white border-[#d9d9d9] h-[55] border-[2px] p-3 m-2.5 flex justify-center rounded-[10px]">
<div className="flex flex-col w-[88%] mr-[25px]" >
{nameElement}
</div>
<div className="absolute bottom-[-2px]" id={id+"1"}></div>
</div>
</Rnd>
bokuweb commented
When using 'default', it behaves as an uncontrolled component, so it cannot be used in conjunction with 'size'.