From 32ddd4b908f4dcf1c97ad8dd431141cdf23e864e Mon Sep 17 00:00:00 2001
From: Wouter Laermans <wouter.laermans@appwise.be>
Date: Wed, 18 Dec 2024 21:15:02 +0100
Subject: [PATCH] fix(PopoverContent): focus trap

---
 packages/core/src/FocusScope/FocusScope.vue          | 3 ++-
 packages/core/src/Popover/PopoverContent.vue         | 4 +++-
 packages/core/src/Popover/PopoverContentImpl.vue     | 6 ++++--
 packages/core/src/Popover/PopoverContentNonModal.vue | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/FocusScope/FocusScope.vue b/packages/core/src/FocusScope/FocusScope.vue
index 7779b856d..c7d369251 100644
--- a/packages/core/src/FocusScope/FocusScope.vue
+++ b/packages/core/src/FocusScope/FocusScope.vue
@@ -72,6 +72,7 @@ watchEffect((cleanupFn) => {
   if (!isClient)
     return
   const container = currentElement.value
+
   if (!props.trapped)
     return
 
@@ -184,7 +185,7 @@ watchEffect(async (cleanupFn) => {
 })
 
 function handleKeyDown(event: KeyboardEvent) {
-  if (!props.loop && !props.trapped)
+  if (!props.loop || !props.trapped)
     return
   if (focusScope.paused)
     return
diff --git a/packages/core/src/Popover/PopoverContent.vue b/packages/core/src/Popover/PopoverContent.vue
index 40eb1437a..cd8034bbb 100644
--- a/packages/core/src/Popover/PopoverContent.vue
+++ b/packages/core/src/Popover/PopoverContent.vue
@@ -22,7 +22,9 @@ import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'
 import { Presence } from '@/Presence'
 
-const props = defineProps<PopoverContentProps>()
+const props = withDefaults(defineProps<PopoverContentProps>(), {
+  trapFocus: true,
+})
 const emits = defineEmits<PopoverContentEmits>()
 
 const rootContext = injectPopoverRootContext()
diff --git a/packages/core/src/Popover/PopoverContentImpl.vue b/packages/core/src/Popover/PopoverContentImpl.vue
index 989475284..f57b12a2a 100644
--- a/packages/core/src/Popover/PopoverContentImpl.vue
+++ b/packages/core/src/Popover/PopoverContentImpl.vue
@@ -25,7 +25,7 @@ export interface PopoverContentImplProps
   DismissableLayerProps {
   /**
    * Whether focus should be trapped within the `MenuContent`
-   * @defaultValue false
+   * @defaultValue true
    */
   trapFocus?: FocusScopeProps['trapped']
 }
@@ -38,7 +38,9 @@ import { DismissableLayer } from '@/DismissableLayer'
 import { FocusScope } from '@/FocusScope'
 import { useFocusGuards, useForwardExpose, useForwardProps } from '@/shared'
 
-const props = defineProps<PopoverContentImplProps>()
+const props = withDefaults(defineProps<PopoverContentImplProps>(), {
+  trapFocus: true,
+})
 const emits = defineEmits<PopoverContentImplEmits>()
 
 const forwarded = useForwardProps(reactiveOmit(props, 'trapFocus', 'disableOutsidePointerEvents'))
diff --git a/packages/core/src/Popover/PopoverContentNonModal.vue b/packages/core/src/Popover/PopoverContentNonModal.vue
index 3bbddea2f..aa739c509 100644
--- a/packages/core/src/Popover/PopoverContentNonModal.vue
+++ b/packages/core/src/Popover/PopoverContentNonModal.vue
@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
   <PopoverContentImpl
     v-bind="forwarded"
-    :trap-focus="false"
+    :trap-focus="props.trapFocus"
     :disable-outside-pointer-events="false"
     @close-auto-focus="
       (event) => {