skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

shadcn-errors-radix-controlled

Fix shadcn Radix primitive controlled-state and Slot/Portal contract violations.

Updated May 19, 2026
Search Tags:#debugging#shadcn#focus management#radix#controlled state#asChild slot#portal stacking
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-errors-radix-controlled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-errors-radix-controlled
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-errors/shadcn-errors-radix-controlled
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-errors-radix-controlled

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents Radix-wrapped shadcn primitives from getting stuck, crashing, mis-stacking, or losing focus by diagnosing the most common controlled-state and Slot/Portal contract violations.

Core Features & Use Cases

  • Open/Value Contract Debugging: Detects and corrects half-controlled states such as open without onOpenChange and value without onValueChange, which makes primitives effectively read-only.
  • Slot asChild Safety Checks: Prevents the React Slot runtime crash and silent a11y/focus failures by enforcing the “exactly one child” and “must forward refs” rules.
  • Portal + container Fixes: Resolves stacking-context and placement issues caused by transformed/filtered ancestors by scoping the Portal with the container prop.
  • Modal Semantics & Focus Management: Applies correct modal behavior (focus trap/scroll lock vs non-modal dismissal) to fix popovers/dialog-like components that close on form submit or swallow Escape.
  • Close-On-Success Workflow: Ensures controlled open state is updated only after mutations succeed so loading UI and error handling work reliably.

Quick Start

Ask the AI to diagnose why your shadcn Dialog/Popover/Select doesn’t close, then request the exact fix using the open/value pairing and the correct event/prop patterns.

Frequently Asked Questions about shadcn-errors-radix-controlled

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my shadcn Dialog or Popover stay open and not close on click?▼

Your shadcn Dialog or Popover stays open because of a half-controlled state, where `open` is passed without the `onOpenChange` handler, making the primitive read-only. You must enforce the open and onOpenChange pairing contract to restore dismissal.

How do I fix React Slot runtime crashes when using asChild in shadcn components?▼

To fix React Slot runtime crashes with `asChild`, ensure you pass exactly one child element and that the child component forwards refs. Enforcing the Slot single-child forwardRef contract prevents silent a11y failures and runtime errors in shadcn UI.

What causes focus to escape or z-index stacking issues in Radix Portals?▼

Focus escapes and z-index stacking issues in Radix Portals are caused by transformed or filtered ancestor elements. You resolve this by scoping the Portal with the `container` prop to enforce correct stacking-context and placement behavior.

How do I stop my shadcn Select from swallowing Escape or closing on form submit?▼

To stop your shadcn Select from swallowing Escape or closing on submit, apply the correct `modal` behavior to differentiate focus trap and scroll lock from non-modal dismissal semantics. Correct modal semantics prevent accidental closure during interactions.

When should I update controlled open state for shadcn Drawer close-on-success workflows?▼

You should update the controlled open state for shadcn Drawer close-on-success workflows only after mutations succeed. This ensures loading UI and error handling work reliably without trapping the user in a stuck component state.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

shadcn-syntax-popover-tooltip-hovercard

Select and configure shadcn floating-panel primitives for anchored UX scenarios.

Official
Advanced
zinohomezinohome
1

modal-drawer-system

Generate accessible modal dialogs and drawers with focus trapping and ARIA attributes.

Community
Intermediate
betterbrandbetterbrand

add-dialog-component

Create Radix UI dialog components with forms and tRPC mutations.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-code-review

Review shadcn/ui React components for CVA, composition, and accessibility issues.

Community
Intermediate