mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
fix: Safari compatibility issues in Secrets panel dialog (#8610)
## Summary Fixes multiple Safari-specific issues in the Secrets panel dialog: 1. **Dropdown not opening** - Safari has issues with click events on portaled content inside dialogs. Added `disablePortal` prop to `SelectContent` to render content inline. 2. **Close button focused on open** - Added `autofocus` to `SelectTrigger` so focus goes to the first form field. 3. **Buttons not focusable** - Safari doesn't focus buttons on click by default. Added `tabindex="0"` to Cancel/Save buttons. ## Changes - `SelectContent.vue`: Added `disablePortal` prop with explanatory comment linking to upstream issue - `SecretFormDialog.vue`: Applied Safari workarounds ## References - https://github.com/chakra-ui/ark/issues/1782 (Portal issue in Safari) - https://mayank.co/blog/safari-focus/ (Button focus behavior) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added option to disable portal rendering in select components for greater control over component behavior. * **Bug Fixes** * Improved keyboard accessibility in form dialogs with enhanced focus management, auto-focus on select triggers, and optimized tab navigation for action buttons. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
committed by
GitHub
parent
507500a9d7
commit
036675bb49
@@ -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="
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user