Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TAGC opened this issue Feb 23, 2024 · 6 comments · May be fixed by #313
Open

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

TAGC opened this issue Feb 23, 2024 · 6 comments · May be fixed by #313
Labels
help wanted Extra attention is needed

Comments

@TAGC
Copy link

TAGC commented Feb 23, 2024

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:

Screen.Recording.2024-02-23.at.16.04.57.mov

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
Copy link
Owner

bvaughn commented Feb 24, 2024

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

@TAGC
Copy link
Author

TAGC commented Feb 26, 2024

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!

@bvaughn bvaughn added the help wanted Extra attention is needed label Feb 26, 2024
@AlfieJones
Copy link

This also happens when you unmount the component during dragging

@TAGC TAGC linked a pull request Mar 6, 2024 that will close this issue
@TAGC
Copy link
Author

TAGC commented Mar 6, 2024

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
Copy link

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

@TAGC
Copy link
Author

TAGC commented May 8, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants