Select component inside Sheet

[EnesBesirevic]

this is my code plain and simple:

Open Are you absolutely sure? Light Dark System

                and when I open Select content  I get this message: 
                
                
                Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.

Element with focus: <button.flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 w-[180px]>
Ancestor with aria-hidden: <div.bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-full md:w-2/3 lg:w-1/2 border-l sm:max-w-[720px]#radix-?r8?>

Thats it, how do I create Select inside the Sheet component?

[qyrn]

This is a known issue with Radix UI components. When you have a Select inside a Sheet (or Dialog), there's a focus conflict because both components try to manage focus.

Solution: Add modal={false} to your SelectContent:

<SelectContent modal={false}>
  <SelectItem value="light">Light</SelectItem>
  <SelectItem value="dark">Dark</SelectItem>
  <SelectItem value="system">System</SelectItem>
</SelectContent>

This tells the Select not to trap focus, which prevents the aria-hidden warning.

Alternative: If you need more complex selection behavior inside a Sheet, consider using a Combobox instead, which handles this scenario better.