[Bug](@fluentui-contrib/react-resize-handle): Resizing sometimes fails with a 🚫 cursor

[ryantrem]

Package

react-resize-handle

Package version

0.8.0

Environment

Repro is in the sample at: https://storybooks.fluentui.dev/react/?path=/docs/contrib_packages-react-resize-handle--docs

Current Behavior

I found in my project that resizing panes sometimes fails with a 🚫 cursor. That is, you click and drag the resize element, and instead of resizing, you just get a 🚫 cursor. I did some testing on the sample provided in the docs (https://storybooks.fluentui.dev/react/?path=/docs/contrib_packages-react-resize-handle--docs) and found the same behavior occurs.

Expected Behavior

The resizer is robust to pointer down/up anywhere without getting into a bad state.

Reproduction

https://storybooks.fluentui.dev/react/?path=/docs/contrib_packages-react-resize-handle--docs

Steps to reproduce

I can't nail down exactly what is happening here, but I have found a couple repros:

Consistent Repro

1. Click and hold the middle resizer (the one that resizes vertically)
2. Move the pointer up until you hit the limit of the resize and the cursor switches from a resize cursor to a regular pointer cursor
3. Release the mouse button
4. Click the same resizer and try to drag it down
5. You get a 🚫 and the resizing goes into a bad state

Inconsistent Repro

1. Click and drag any of the white divider bars (not the actual resize handle element)
2. You may see a 🚫. If not, go back to step 1
3. Once you see the 🚫, then try clicking and ragging the actual resize handle element
4. Observe that you still get a 🚫 and the resizing gets into a bad state again

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

Babylon.js tools in preview

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.