[bug]: Resizable component cursor issue

[iltan987]

Describe the bug

Have a Resizable component having both vertical and horizontal sides. Resize vertically or horizontally. Then, move your cursor to opposite side (if you resized vertically, hover your mouse to horizontal resize line or vice-versa). Cursor will show previous cursor until you click it.
I used Shadcn official docs

Affected component/components

Resizable

How to reproduce

1. Create a resizable component with at least 2 columns and 2 rows.
2. Resize any cell.
3. If you resized vertically, move your cursor to any line where you can resize horizontally (don't click) -> Your cursor will be vertical instead of horizontal
4. Or vice-versa. If you resized horizontally, move your cursor to any line where you can resize vertically (don't click) -> Your cursor will be horizontal instead of vertical

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/resizable

Logs

System Info

I used official Shadcn documentation

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Code-Parth]

hey @iltan987

I checked that, and I think that's perfect and working correctly.

I use this code to make this

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


export default function Home() {
    return (
        <div className="w-full h-screen flex justify-center items-center">
            <ResizablePanelGroup direction="horizontal">
                <ResizablePanel>
                    <ResizablePanelGroup direction="vertical">
                        <ResizablePanel className="flex size-full text-xl justify-center items-center">
                            One
                        </ResizablePanel>
                        <ResizableHandle />
                        <ResizablePanel className="flex size-full text-xl justify-center items-center">
                            Two
                        </ResizablePanel>
                    </ResizablePanelGroup>
                </ResizablePanel>
                <ResizableHandle />
                <ResizablePanel>
                    <ResizablePanelGroup direction="vertical">
                        <ResizablePanel className="flex size-full text-xl justify-center items-center">
                            Three
                        </ResizablePanel>
                        <ResizableHandle />
                        <ResizablePanel className="flex size-full text-xl justify-center items-center">
                            Four
                        </ResizablePanel>
                    </ResizablePanelGroup>
                </ResizablePanel>
            </ResizablePanelGroup>
        </div>
    );
}

can you provide the code that you are using for that

[iltan987]

Hello @Code-Parth
Thank you for your response
As I mentioned earlier, I checked using shadcn documentation. I guess it doesn't work on their website but works in our projects. When I write it myself it works. Here is the code:

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

export function ResizableDemo() {
  return (
    <ResizablePanelGroup
      direction="horizontal"
      className="max-w-md rounded-lg border md:min-w-[450px]"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">One</span>
        </div>
      </ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={50}>
        <ResizablePanelGroup direction="vertical">
          <ResizablePanel defaultSize={25}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Two</span>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={75}>
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">Three</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}

[Code-Parth]

Yes, I saw that first when I tried but; that is working correctly on the localhost
@iltan987 can you reopen it, will try to fix that

[Code-Parth]

thanks ser 🤝🏻

[Code-Parth]

@iltan987

you can show the fix that was the dependencies issue of react-resizable-panels

#6510