Bug: onResize does not respect resizeGrid

[jonocodes]

Description

If I set a dragGrid, then onDrag callbacks fire only when the mouse takes a step in the grid. This is expected.
If I set a resizeGrid, then onResize callbacks fire every time the mouse moves one pixel - ignoring the grid. This is not expected.

Overview of the problem

I'm using react-rnd version 10.3.3

My browser is: Firefox and Chrome

Reproduced project

https://codesandbox.io/s/modest-wood-ys66zi?file=/src/index.js

Also pasted below.

import React from "react";
import { render } from "react-dom";
import { Rnd } from "react-rnd";

const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      width: 200,
      height: 200,
      x: 10,
      y: 10
    };
  }

  render() {
    return (
      <Rnd
        style={style}
        size={{ width: this.state.width, height: this.state.height }}
        position={{ x: this.state.x, y: this.state.y }}
        dragGrid={[50, 50]}
        resizeGrid={[50, 50]}
        onDrag={(e, data) => {
          // logs every 50 pixels. expected
          console.log('onDrag', data)
        }}
        onResize={(e, dir, ref, delta, pos) => {
          // logs every 1 pixel. not expected
          console.log('onResize', dir, delta, pos)
        }}
      >
        Rnd
      </Rnd>
    );
  }
}

render(<App />, document.getElementById("root"));

[quyle92]

I've just tested your sample code and noticed that it did respect the resizeGrid but there is another problem which is when I resized it and then released the cursor, it immediately went back to original state.

[bokuweb]

Ah, ok, it is re-resizable issue i'll fix it.

[bokuweb]

bokuweb/re-resizable#783

[bokuweb]

@jonocodes Fixed by 10.4.10

https://codesandbox.io/p/sandbox/youthful-tamas-5h3q2z?file=%2Fpackage.json