Layout values set to NaN if group is rendered within a hidden container

[songkeys]

Currently migrating from v3 to v4. my code looks like this:

I copied the base components from shadcn and adapt to v4 changes:

'use client'

import { HandGripIcon } from '@hugeicons-pro/core-stroke-rounded'
import type * as React from 'react'
import * as ResizablePrimitive from 'react-resizable-panels'

import { Icon } from '@/components/ui/icon'
import { cn } from '@/lib/utils'

function ResizablePanelGroup({
	className,
	...props
}: React.ComponentProps<typeof ResizablePrimitive.Group>) {
	return (
		<ResizablePrimitive.Group
			data-slot="resizable-panel-group"
			className={cn(
				'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
				className,
			)}
			{...props}
		/>
	)
}

function ResizablePanel({
	...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
	withHandle,
	className,
	...props
}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
	withHandle?: boolean
}) {
	return (
		<ResizablePrimitive.Separator
			data-slot="resizable-handle"
			className={cn(
				'focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
				'opacity-20 hover:opacity-80 transition-opacity',
				// "data-[resize-handle-state='hover']:bg-primary transition-colors",
				className,
			)}
			{...props}
		>
			{withHandle && (
				<div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs bg-border">
					<Icon icon={HandGripIcon} className="size-4" />
				</div>
			)}
		</ResizablePrimitive.Separator>
	)
}

export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

[bvaughn]

I have nothing to do with ShadUI. I would be surprised if they have updated their wrapper to work with version 4 of this library already. When I looked earlier today, they were pinned to version 3.

[songkeys]

No. They haven't. I migrated myself. You can see from my snippet - i don't think this NaN comes from the wrapper.

[bvaughn]

Share a full, runnable repro then and I’ll take a look.

[songkeys]

Sure. I'll do tomorrow. It's too late for me today. My project is too big. It might take some time to extract a minimal repro. Will come to you.

[bvaughn]

Understood! Sounds good.

[bvaughn]

Related: shadcn-ui/ui#9124

[songkeys]

Hi. Please take a look: https://codesandbox.io/p/devbox/7357zv

This doesn't relate to shadcn/ui

Steps to reproduce

1. Start the dev server and open the browser DevTools console.
2. On initial load, Tab B is mounted but hidden via display: none.
3. You should see a log like:
   • [tab b] onLayoutChange { left: NaN, right: NaN }
4. Click “Tab B” to show it — the layout remains poisoned (still NaN).

This "display:none" behavior works fine in v3 though.

---

edit: getLayout and setLayout also throw "Group ... not found" error in this case. Previously it's working.

[bvaughn]

Devbox not found

It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

[songkeys]

Devbox not found

It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

Sorry about this. Just updated the permission