bvaughn / react-resizable-panels

https://react-resizable-panels.vercel.app/
MIT License
3.58k stars 124 forks source link

Global cursor style persists if PanelResizeHandle is disabled while dragging #308

Closed TAGC closed 4 days ago

TAGC commented 4 months ago

I'm trying to implement a vertical split pane view in an application, and am copying code over from another frontend app our company is developing that does something similar using an older version of this library.

In both applications, the bottom panel collapses if it's brought close to the bottom of the screen, and the panel resize handle is disabled with the intention being for the user to click one of the buttons in the footer to open it again.

In the original application, using v0.0.55 of the library, this works without issues. However, in my application, using v2.0.9 of the library, I find that sometimes the cursor gets stuck with the ns-resize appearance through the whole page, as shown below:

https://github.com/bvaughn/react-resizable-panels/assets/1588951/9407bcce-b51f-4c1a-8672-66ba53a1a2f4

I've determined that it's related to this code: https://github.com/bvaughn/react-resizable-panels/blob/e922a963a90f530cb294eaf4bfd1450fa1246d27/packages/react-resizable-panels/src/utils/cursor.ts

What seems to be happening is that there's a race condition between the global cursor style getting reset when the mouse button is released, and the PanelResizeHandle getting disabled when the cursor is released near the bottom of the screen. If the latter event handler "wins", then it seems to interrupt the event handler that resets the global cursor style.

I think a potential fix might be to update the following code to ensure the global cursor style is reset if the PanelResizeHandle is disabled:

https://github.com/bvaughn/react-resizable-panels/blob/e922a963a90f530cb294eaf4bfd1450fa1246d27/packages/react-resizable-panels/src/PanelResizeHandle.ts#L104C1-L111C71

bvaughn commented 4 months ago

I'd be happy to review a PR if you'd like to post one!

TAGC commented 4 months ago

Sounds good. This is for a hackday project rather than a day-to-day project, but when I'm next free to work on it I'll give it a shot!

AlfieJones commented 4 months ago

This also happens when you unmount the component during dragging

TAGC commented 4 months ago

FWIW, this issue apparently also affects v0.0.55 since my colleagues working on the main, in-production frontend app also recently discovered, then discovered this issue and informed me. I've raised a PR that should hopefully resolve this bug.

abduu11aahh commented 1 month ago

Hi @TAGC I am experiencing the same issue . Did you find any work arounds for this issue? Thank you

TAGC commented 1 month ago

@abduu11aahh I have a fix for this in #313 - I'm just waiting on a code review.