Cannot resize or move after onImageLoaded

This is probably related to #280

Steps to reproduce:

Select image, preferable a portrait or landscape for best effect. Click a handle to resize OR click and drag in the middle to move the crop area.

Expected results Crop area is resized or moved

Actual results Nothing happens on FIRST interaction, but if I try again, I get the expected results.

DEMO

I’ve forked your example from the README here: https://codesandbox.io/s/react-image-crop-demo-3mtjy

What I wish to achieve: I want to have a default square crop area when react-image-crop loads.

I’ve set the initial crop aspect ratio to 1 just so I can reuse the state in onImageLoaded. Then the function looks like this:

onImageLoaded = image => {
    const { width, height } = image;

    let crop;

    if (width > height) {
      crop = {
        ...this.state.crop,
        width: height,
        height,
        x: width / 2 - height / 2,
        y: 0
      };
    } else {
      crop = {
        ...this.state.crop,
        width,
        height: width,
        x: 0,
        y: height / 2 - width / 2
      };
    }

    this.setState({ crop });
    return false;
  };

I seem to need to provide both width and height for this to work.

[designbyadrian]

Hi there! That certainly isn’t the worst work-around I’ve seen! 😄 My issue is resolved.

[DominicTobias]

You can workaround the issue by adding unit: 'px' to your crop in onImageLoaded, though it should have defaulted to this (bug)