Ensure PopoverPanel can be used inside <transition>

packages/@headlessui-react/src/test-utils/interactions.ts

@@ -234,7 +234,7 @@ export async function click(
 ) {
   try {
     if (element === null) return expect(element).not.toBe(null)
-    if (element.disabled) return
+    if (element instanceof HTMLButtonElement && element.disabled) return
 
     let options = { button }
 

packages/@headlessui-vue/CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix getting Vue dom elements ([#1610](https://github.com/tailwindlabs/headlessui/pull/1610))
 - Ensure `CMD`+`Backspace` works in nullable mode for `Combobox` component ([#1617](https://github.com/tailwindlabs/headlessui/pull/1617))
 - Properly merge incoming props with own props ([#1651](https://github.com/tailwindlabs/headlessui/pull/1651))
+- Ensure `PopoverPanel` can be used inside `<transition>` ([#1653](https://github.com/tailwindlabs/headlessui/pull/1653))
 
 ## [1.6.5] - 2022-06-20
 

packages/@headlessui-vue/src/components/popover/popover.ts

@@ -542,7 +542,7 @@ export let PopoverPanel = defineComponent({
       function run() {
         match(direction.value, {
           [TabDirection.Forwards]: () => {
-            focusIn(el, Focus.First)
+            focusIn(el, Focus.Next)
           },
           [TabDirection.Backwards]: () => {
             // Coming from the Popover.Panel (which is portalled to somewhere else). Let's redirect
@@ -592,7 +592,7 @@ export let PopoverPanel = defineComponent({
 
             focusIn(combined, Focus.First, false)
           },
-          [TabDirection.Backwards]: () => focusIn(el, Focus.Last),
+          [TabDirection.Backwards]: () => focusIn(el, Focus.Previous),
         })
       }
 
@@ -618,38 +618,43 @@ export let PopoverPanel = defineComponent({
         tabIndex: -1,
       }
 
-      return h(Fragment, [
-        visible.value &&
-          api.isPortalled.value &&
-          h(Hidden, {
-            id: beforePanelSentinelId,
-            ref: api.beforePanelSentinel,
-            features: HiddenFeatures.Focusable,
-            as: 'button',
-            type: 'button',
-            onFocus: handleBeforeFocus,
-          }),
-        render({
-          ourProps,
-          theirProps: { ...attrs, ...props },
-          slot,
-          attrs,
-          slots,
-          features: Features.RenderStrategy | Features.Static,
-          visible: visible.value,
-          name: 'PopoverPanel',
-        }),
-        visible.value &&
-          api.isPortalled.value &&
-          h(Hidden, {
-            id: afterPanelSentinelId,
-            ref: api.afterPanelSentinel,
-            features: HiddenFeatures.Focusable,
-            as: 'button',
-            type: 'button',
-            onFocus: handleAfterFocus,
-          }),
-      ])
+      return render({
+        ourProps,
+        theirProps: { ...attrs, ...props },
+        attrs,
+        slot,
+        slots: {
+          ...slots,
+          default: (...args) => [
+            h(Fragment, [
+              visible.value &&
+                api.isPortalled.value &&
+                h(Hidden, {
+                  id: beforePanelSentinelId,
+                  ref: api.beforePanelSentinel,
+                  features: HiddenFeatures.Focusable,
+                  as: 'button',
+                  type: 'button',
+                  onFocus: handleBeforeFocus,
+                }),
+              slots.default?.(...args),
+              visible.value &&
+                api.isPortalled.value &&
+                h(Hidden, {
+                  id: afterPanelSentinelId,
+                  ref: api.afterPanelSentinel,
+                  features: HiddenFeatures.Focusable,
+                  as: 'button',
+                  type: 'button',
+                  onFocus: handleAfterFocus,
+                }),
+            ]),
+          ],
+        },
+        features: Features.RenderStrategy | Features.Static,
+        visible: visible.value,
+        name: 'PopoverPanel',
+      })
     }
   },
 })

packages/@headlessui-vue/src/internal/focus-sentinel.ts

@@ -33,7 +33,7 @@ export let FocusSentinel = defineComponent({
 
             // Try to move focus to the correct element. This depends on the implementation
             // of `onFocus` of course since it would be different for each place we use it in.
-            if (props.onFocus()) {
+            if (props.onFocus?.()) {
               enabled.value = false
               cancelAnimationFrame(frame)
               return

packages/@headlessui-vue/src/test-utils/interactions.ts

@@ -232,7 +232,7 @@ export async function click(
 ) {
   try {
     if (element === null) return expect(element).not.toBe(null)
-    if (element.disabled) return
+    if (element instanceof HTMLButtonElement && element.disabled) return
 
     let options = { button }