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

[ahatzz11]

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.

Code

'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>
  )
}

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

MacOS, Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues