From e3d9f419269a1c4588c0c13caae96952280e9513 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 21 Jan 2024 11:56:17 +0000
Subject: [PATCH] Fixed #5055 - Calendar: When use with Datatable filter, the
 calendar would show at the bottom of the page.

---
 components/lib/basedirective/BaseDirective.js | 1 +
 components/lib/datatable/ColumnFilter.vue     | 7 +++++--
 components/lib/focustrap/FocusTrap.js         | 7 +++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index cecbc8012..774a3e496 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -112,6 +112,7 @@ const BaseDirective = {
 
             el.$instance = el._$instances[name]; // pass instance data to hooks
             el.$instance[hook]?.(el, binding, vnode, prevVnode); // handle hook in directive implementation
+            el[`$${name}`] = el.$instance; // expose all options with $<directive_name>
             BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
         };
 
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index f3cc62ec0..dbad5fd05 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -22,12 +22,12 @@
             <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
         </button>
         <Portal>
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="getColumnPT('transition')">
                 <div
                     v-if="overlayVisible"
                     :ref="overlayRef"
                     :id="overlayId"
-                    v-focustrap="{ autoFocus: true }"
+                    v-focustrap
                     :aria-modal="overlayVisible"
                     role="dialog"
                     :class="[cx('filterOverlay'), filterMenuClass]"
@@ -550,6 +550,9 @@ export default {
 
             OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
+        onOverlayAfterEnter() {
+            this.overlay?.$focustrap?.autoFocus();
+        },
         onOverlayLeave() {
             this.onOverlayHide();
         },
diff --git a/components/lib/focustrap/FocusTrap.js b/components/lib/focustrap/FocusTrap.js
index 44f984449..fc2ecf4b1 100644
--- a/components/lib/focustrap/FocusTrap.js
+++ b/components/lib/focustrap/FocusTrap.js
@@ -8,7 +8,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
         if (!disabled) {
             this.createHiddenFocusableElements(el, binding);
             this.bind(el, binding);
-            this.autoFocus(el, binding);
+            this.autoElementFocus(el, binding);
         }
 
         el.setAttribute('data-pd-focustrap', true);
@@ -64,7 +64,10 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
             el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
             el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
         },
-        autoFocus(el, binding) {
+        autoFocus(options) {
+            this.autoElementFocus(this.$el, { value: { ...options, autoFocus: true } });
+        },
+        autoElementFocus(el, binding) {
             const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
             let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`);