Repository: ui
Issue: [bug]: Dropdown component in a Sidebar appears behind the sidebar on the first click
Labels: bug

### Describe the bug

When a `DropdownMenu` component is part of a `Sidebar`, the very first click after a page refresh the pop up box ends up showing the selector items behind the sidebar. Any subsequent click it appears above the sidebar as expected. I've attempted to play with z-index with no success.

This also seems to happen with the `Select` component.


<details><summary>Code</summary>
<p>

```
'use client'

import * as React from 'react'
import { Calendar, ChevronDown } from 'lucide-react'

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarProvider,
  SidebarInset,
} from "@/components/ui/sidebar"

const months = [
  'A Really really really really long selector item', 'Another really long selector item', 'and a third one just for good measure'

]

export default function Page() {
  const [selectedMonth, setSelectedMonth] = React.useState(months[0])

  return (
    <SidebarProvider>
      <div className="flex h-screen">
        <Sidebar>
          <SidebarHeader>
            <SidebarMenu>
              <SidebarMenuItem>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <SidebarMenuButton>
                      {selectedMonth}
                      <ChevronDown className="ml-auto h-4 w-4" />
                    </SidebarMenuButton>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    {months.map((month) => (
                      <DropdownMenuItem 
                        key={month} 
                        onSelect={() => setSelectedMonth(month)}
                      >
                        {month}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton>
                  <Calendar className="mr-2 h-4 w-4" />
                  <span>Calendar</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
        </Sidebar>
        <SidebarInset>
          <main className="flex-1 p-6">
            <h1 className="text-3xl font-bold">{selectedMonth}</h1>
          </main>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

```

</p>
</details> 

### Affected component/components

Dropdown, Select, Sidebar

### How to reproduce

1. Go to the v0 share
2. Click the selector in the upper left
3. Observe that the selector box is behind the sidebar
4. Click the selector twice
5. Observe that the selector box is now above the sidebar
6. Refresh the Page
7. Repeat step 2

### Codesandbox/StackBlitz link

https://v0.dev/chat/7UBVEfJvCsa?b=b_GrcHeC7iBWf

### Logs

_No response_

### System Info

```bash
MacOS, Chrome
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues