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:
Luke Mino-Altherr
2026-02-04 11:58:40 -08:00
committed by GitHub
parent 507500a9d7
commit 036675bb49
2 changed files with 20 additions and 6 deletions

View File

@@ -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="