From 45a0bf1e89fd51701f68293e662f234e5805140c Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Thu, 5 Feb 2026 05:09:28 +0900
Subject: [PATCH] [backport cloud/1.38] fix: Safari compatibility issues in
 Secrets panel dialog (#8611)

Backport of #8610 to `cloud/1.38`

Automatically created by backport workflow.

Co-authored-by: Luke Mino-Altherr <luke@comfy.org>
Co-authored-by: Amp <amp@ampcode.com>
---
 src/components/ui/select/SelectContent.vue          | 13 +++++++++++--
 .../secrets/components/SecretFormDialog.vue         | 13 +++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue
index a88e26b9fe..db1b705f3f 100644
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@@ -20,9 +20,18 @@ defineOptions({
 
 const {
   position = 'popper',
+  // Safari has issues with click events on portaled content inside dialogs.
+  // Set disablePortal to true when using Select inside a Dialog on Safari.
+  // See: https://github.com/chakra-ui/ark/issues/1782
+  disablePortal = false,
   class: className,
   ...restProps
-} = defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>()
+} = defineProps<
+  SelectContentProps & {
+    class?: HTMLAttributes['class']
+    disablePortal?: boolean
+  }
+>()
 const emits = defineEmits<SelectContentEmits>()
 
 const delegatedProps = computed(() => ({
@@ -34,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <SelectPortal>
+  <SelectPortal :disabled="disablePortal">
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
diff --git a/src/platform/secrets/components/SecretFormDialog.vue b/src/platform/secrets/components/SecretFormDialog.vue
index 5d99b9d828..e720547efe 100644
--- a/src/platform/secrets/components/SecretFormDialog.vue
+++ b/src/platform/secrets/components/SecretFormDialog.vue
@@ -13,10 +13,10 @@
           {{ $t('secrets.provider') }}
         </label>
         <Select v-model="form.provider" :disabled="mode === 'edit'">
-          <SelectTrigger id="secret-provider" class="w-full">
+          <SelectTrigger id="secret-provider" class="w-full" autofocus>
             <SelectValue :placeholder="$t('g.none')" />
           </SelectTrigger>
-          <SelectContent>
+          <SelectContent disable-portal>
             <SelectItem
               v-for="option in providerOptions"
               :key="option.value || 'none'"
@@ -79,10 +79,15 @@
       </span>
 
       <div class="flex justify-end gap-2 pt-2">
-        <Button variant="secondary" type="button" @click="visible = false">
+        <Button
+          variant="secondary"
+          type="button"
+          tabindex="0"
+          @click="visible = false"
+        >
           {{ $t('g.cancel') }}
         </Button>
-        <Button type="submit" :loading="loading">
+        <Button type="submit" tabindex="0" :loading="loading">
           {{ $t('g.save') }}
         </Button>
       </div>