onCropComplete is firing on window resize

[gregg-cbs]

Describe the bug
If you resize the window, onCropComplete fires.

To Reproduce
Steps to reproduce the behavior:

1. Go to this codesandbox
2. Put a console log in the the onCropComplete
3. Resize the window
4. Notice console logs with what seems like with no debounce

Expected behavior
Not expecting onCropComplete to fire on window resize.. i understand why this might be in place for responsive reasons. But if it is a required feature I would expect the window resize to be debounced.

[ValentinH]

Having this callback fired is mandatory as the crop data is dependent on the window size. However, you have a good point regarding deboucing. We should add a debounce here.

Would you like to do a PR?

[gregg-cbs]

Sure I can do that. Do you mind if I use the debounce package?

[ValentinH]

No it's fine as it's small enough 🙂

[gregg-cbs]

Great will find some time in the next day or so and comment the PR here.

[gregg-cbs]

Looks like window resize uses the computeSizes method

  componentDidMount() {
    window.addEventListener('resize', this.computeSizes)
 }

  computeSizes = () => {
    const mediaRef = this.imageRef || this.videoRef
    ...
  }

If i debounce the resize I will have to pass the same debounced function into removeEventListener.

Would it be safe or okay to debounce the computeSizes method so that recalculations are never running wild:

  computeSizes = debounce(() => {
    const mediaRef = this.imageRef || this.videoRef
    ...
  }, 200)

or wrap it just for the resize

  debouncedComputeSizes = debounce(this.computeSizes, 200)

  componentDidMount() {
    window.addEventListener('resize', this.debouncedComputeSizes)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.debouncedComputeSizes)
 }

[ValentinH]

Indeed, it's better to only do the debounce for the resize event. computeSizes is used in multiple places and in some it has to be done immediately.

[HyeryongChoi]

Hi @ValentinH, I'd like to work on this if it's still open.

Looking at the current code, the root cause seems to be that recomputeCropPosition always calls emitCropData() unconditionally, regardless of whether the crop data actually changed. Since computeSizes now runs on every ResizeObserver tick, dragging the window edge fires onCropComplete/onCropAreaChange dozens of times during a single resize.

My plan is to debounce the emitCropData() call specifically for resize-triggered computeSizes calls, rather than debouncing computeSizes itself — that way the visual crop area still updates smoothly during resize, but onCropComplete only fires once things settle. I went ahead and opened a PR with this approach along with a regression test.

[github-actions]

🚀 Issue was released in v6.1.0 🚀