React-grid-layout: size calculation is wrong when we hide the react-resizable-handle on not hovering on it.

[john-hu]

Thanks for submitting an issue to RGL!

Please mark the type of this issue:

• [x] Bug

If you have a question or bug report, please use the [WebpackBin Template] (http://www.webpackbin.com/EJF48h_rz) (I can't do that)
to demonstrate. It is much easier for us to help you if you do.

WebpackBin doesn't work now. I demo the issue at Codesandbox https://codesandbox.io/s/k13rlr34x5

The code is cut from basic example.

Reproduce:

1. add the following css:

.react-resizable-handle {
  display: none;
}

.react-grid-item:hover > .react-resizable-handle {
  display: block;
}

1. move mouse in any .react-grid-item element to see the resizable-handle
2. drag resizable-handle fast ==>> size is wrong.

The demo video is made. Please find it at the following attachment. BTW, I cannot upload it as mp4, please download it and uncompress it.

react-grid-layout-css-issue.mp4.zip

[ghost]

This looks similar to the issue already reported in #381.

[john-hu]

@groenewaldd I think so. I got the same requirement like you. And react-grid-layout gives me this bug. It took me a few days to find the root cause.

If we use display, it gives us wrong size. If we use visibility, it breaks drag and drop behavior.

BTW, I had finished the task with opacity instead of display or visibility.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days