Hidden <label> inserted by cmdk breaks layout inside flex containers & popovers

[matejmich]

When using cmdk (via shadcn/ui’s <Command />) inside a flex container or popover, the automatically inserted hidden <label cmdk-label> element causes the layout to break.

Even though the label is visually clipped, the browser still measures it, which results in:

parent flex containers stretching

scroll regions collapsing

popovers miscalculating their anchor position

full-page white-out / layout shift

This happend inside nested flex layout with auto height for me. Don't know if that's relevant/

Work around

<Command className="[&>label]:hidden">
this fixed the issue

[AyushNigam-1]

Thanks for reporting this. I’ve tried to reproduce the layout issue using cmdk inside nested flex layouts and a popover-style container, and also inspected the rendered cmdk-label element (position: absolute; 1px × 1px; clipped).

So far I haven’t been able to observe any layout breakage or measurement issues, even after removing/adding the label node, which makes it hard to identify the exact trigger.

Would you be able to share a minimal reproducible example (repo or sandbox) that demonstrates the issue? In particular, details like the surrounding layout, popover/floating component, and browser could help narrow this down.

Thanks , happy to dig deeper once there’s a concrete repro.