bokuweb/react-rnd

onResize increases value only by one-two pixels at once

Closed this issue · 1 comments

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>



When using 'default', it behaves as an uncontrolled component, so it cannot be used in conjunction with 'size'.