search

bvaughn / react-resizable-panels

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

Resizing panel doesn't set the new resize state until clicking on the resize handle (v2.0.0+) #292

Closed AbrahamX3 closed 7 months ago

AbrahamX3 commented 7 months ago

Issue

When resizing a panel and collapsing it and then when doing something else like resizing another panel for example, it starts glitching all over the place until the panel's resize handle that you collapsed has been clicked on.

How to reproduce

[!IMPORTANT] I managed to reproduce this on the offfical website

https://github.com/bvaughn/react-resizable-panels/assets/78459953/bf1443df-6310-4c9e-a8f0-689087a5f938

Steps

  1. Collapse a panel
  2. Try to resize another panel, it should start glitching, to fix it go to the first panel you resized and click on the resize handle and go back to resizing the new panel.

Versions that were affected

I tested it on all the versions above react-resizable-panels@2.0.0 and all of them have this issue, it seems to work perfectly on react-resizable-panels@1.0.10, I collapse a panel and can move on without clicking the resize handle.

More testing

Here is an application I'm using react-resizable-panels in, as you can see, it is pretty hard to click the resize handle when this issue appears. The pointer events get removed on the map, meaning I can't move it, which also means resizing is also taking place even if I “collapsed” it already. It gets fixed once I finally am able to click on the resize handle.

[!NOTE]
Using react-resizable-panels@2.0.4

https://github.com/bvaughn/react-resizable-panels/assets/78459953/9c23d6a1-3538-4087-992c-15d10411d04c

Expected Outcome

When collapsing a panel, I should be able to move on with the actions I am doing (ex: move the map) and if I try to resize the panel it should let me resize with ease.

[!NOTE] Using react-resizable-panels@1.0.10 in this example

https://github.com/bvaughn/react-resizable-panels/assets/78459953/d69d50fc-f951-41b7-97f2-a8dd0c6d75d9

bvaughn commented 7 months ago

I have no idea how you're triggering the behavior you're describing using the official docs page.

I am unable to repro it following the description in this issue:

https://github.com/bvaughn/react-resizable-panels/assets/29597/8fbfaa87-d8d8-4163-81da-90601b2f9236

What's your browser and OS? What kind of mouse/input device are you using?

Can you record a Replay of it happening?

AbrahamX3 commented 7 months ago

Hey, I wasn't able to reproduce this on the official website anymore (but in my application I was), I noticed that you pushed a new release (2.0.5) which might have fixed it on the official website. Seems it only affected 2.0.0 through 2.0.4. Also, when using Replay, it kept crashing every time it was processing a video of 6 seconds and couldn't get it to upload.

I am using Chrome Version 121.0.6167.161 (Official Build) (64-bit) on Windows 11, I am using a Mouse yes, although it happens as well on mobile using Android and Chrome making it hard to resize and touch the resize handle.

I guess you can now close this issue, considering 2.0.5 fixed it 😄

bvaughn commented 7 months ago

Wow. That is certainly interesting, but thanks for reporting back!

xwiz commented 3 weeks ago

@bvaughn I'm experiencing this issue as well when trying to force new layout sizes programmatically during a resize event, only way it can be fixed is putting the mouse again on the ResizeHandle. If the user can be allowed to cancel the resize event/operation programatically, the issue will be fixed. 

react-resizable-panels.js?v=85b2bd46:471 Uncaught Error: Assertion failed!
    at assert (react-resizable-pane…s?v=85b2bd46:471:11)
    at resizePanel (react-resizable-pane…js?v=85b2bd46:494:3)
    at adjustLayoutByDelta (react-resizable-pane…s?v=85b2bd46:588:27)
    at resizeHandler (react-resizable-pane…?v=85b2bd46:1629:26)
    at setResizeHandlerState (react-resizable-pane…?v=85b2bd46:1945:13)