Fix database selector not selectable in connect modal (supabase#36723)

Author: joshenlim

apps/studio/components/interfaces/Connect/Connect.tsx

@@ -2,13 +2,13 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { ExternalLink, Plug } from 'lucide-react'
 import { parseAsBoolean, useQueryState } from 'nuqs'
-import { useState, useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 import { DatabaseConnectionString } from 'components/interfaces/Connect/DatabaseConnectionString'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import Panel from 'components/ui/Panel'
-import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useAPIKeysQuery } from 'data/api-keys/api-keys-query'
+import { getAPIKeys, useProjectSettingsV2Query } from 'data/config/project-settings-v2-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -239,7 +239,7 @@ export const DatabaseConnectionString = () => {
             </SelectContent_Shadcn_>
           </Select_Shadcn_>
         </div>
-        <DatabaseSelector buttonProps={{ size: 'small' }} />
+        <DatabaseSelector portal={false} buttonProps={{ size: 'small' }} />
       </div>
 
       {isLoading && (

apps/studio/components/ui/DatabaseSelector.tsx

@@ -36,6 +36,7 @@ interface DatabaseSelectorProps {
   buttonProps?: ButtonProps
   onSelectId?: (id: string) => void // Optional callback
   onCreateReplicaClick?: () => void
+  portal?: boolean
 }
 
 const DatabaseSelector = ({
@@ -45,6 +46,7 @@ const DatabaseSelector = ({
   onSelectId = noop,
   buttonProps,
   onCreateReplicaClick = noop,
+  portal = true,
 }: DatabaseSelectorProps) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
@@ -110,7 +112,7 @@ const DatabaseSelector = ({
           </Button>
         </div>
       </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ className="p-0 w-64" side="bottom" align="end" portal={true}>
+      <PopoverContent_Shadcn_ className="p-0 w-64" side="bottom" align="end" portal={portal}>
         <Command_Shadcn_>
           <CommandList_Shadcn_>
             {additionalOptions.length > 0 && (