Dragging resize handle to collapse and expand panel does not behave as expected

[imaricodes]

I am using react-resizable-panels": "^1.0.9" via shadcn ui in a Nextjs 14 application.

I have two panels in a horizontal group. The right panel collapses when I drag the resize handle to the right past the minSize as expected. The collapsed panel also expands as expected when I drag the resize handle to the left.

The issue is that the collapsed panel does not expand until the resizeHandle is dragged back to (what I think) is the minSize set for the collapsed panel. For a while, this made me think the resize handle was not working.

I expected the collapsed panel to begin expanding as soon as I start dragging the resize handle. However, nothing visible happens as I drag left. The resize handle does not move at all. When I reach a certain point, the collapsed panel suddenly expands to full size and the resize handle jumps to where my pointer is. I tried adjusting the collapsedSize prop value using 0 and other values, as well as the minSize prop with no change in behavior.

This behavior seems that it would be confusing to a user. Is there some prop I've missed to change this behavior?

I noticed this same behavior in this example:https://react-resizable-panels.vercel.app/examples/collapsible

Here's my code:

import React from "react";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

export default function Resizable1() {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel
        className="h-24 bg-yellow-300"
        id="panelLeft"
        order={1}
        defaultSize={50}
      >
        One
      </ResizablePanel>
      <ResizableHandle withHandle={true} />
      <ResizablePanel
        className="h-24 bg-red-300"
        defaultSize={50}
        minSize={25}
        id="panelRight"
        order={2}
        collapsible={true}
        collapsedSize={0}
      >
        Two
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}

[bvaughn]

The behavior you describe here is intentional and matches VS Code's UX:

Kapture.2024-01-19.at.10.15.16.mp4

However, nothing visible happens as I drag left. The resize handle does not move at all.

For example, the handle can't move so long as the panel is collapsed, without visibly "detaching" from the panel (which I think would make most UIs look broken).

[imaricodes]

Ok, I see what you mean. I see that in vscode, the ability to resize the left panel by dragging goes aways after collapse (at least in my vscode window) and you have to click the explorer icon to expand it again. I think I'll use that approach for expanding my collapsible panel. Thanks!

[bvaughn]

Yup! I use a click-to-reopen UX in some of the apps I use this library in as well.