vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5055 - Calendar: When use with Datatable filter, the calendar would show at the bottom of the page.

pull/5128/head
mertsincan 2024-01-21 11:56:17 +00:00
parent ae81a90b73
commit e3d9f41926
3 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/lib/basedirective/BaseDirective.js
View File

@ -112,6 +112,7 @@ const BaseDirective = {
el.$instance = el._$instances[name]; // pass instance data to hooks el.$instance = el._$instances[name]; // pass instance data to hooks
el.$instance[hook]?.(el, binding, vnode, prevVnode); // handle hook in directive implementation 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) BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
}; };

7
components/lib/datatable/ColumnFilter.vue
View File

@ -22,12 +22,12 @@
<component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" /> <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPT('filterClearIcon')" />
</button> </button>
<Portal> <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 <div
v-if="overlayVisible" v-if="overlayVisible"
:ref="overlayRef" :ref="overlayRef"
:id="overlayId" :id="overlayId"
v-focustrap="{ autoFocus: true }" v-focustrap
:aria-modal="overlayVisible" :aria-modal="overlayVisible"
role="dialog" role="dialog"
:class="[cx('filterOverlay'), filterMenuClass]" :class="[cx('filterOverlay'), filterMenuClass]"
@ -550,6 +550,9 @@ export default {
OverlayEventBus.on('overlay-click', this.overlayEventListener); OverlayEventBus.on('overlay-click', this.overlayEventListener);
}, },
onOverlayAfterEnter() {
this.overlay?.$focustrap?.autoFocus();
},
onOverlayLeave() { onOverlayLeave() {
this.onOverlayHide(); this.onOverlayHide();
}, },

7
components/lib/focustrap/FocusTrap.js
View File

@ -8,7 +8,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
if (!disabled) { if (!disabled) {
this.createHiddenFocusableElements(el, binding); this.createHiddenFocusableElements(el, binding);
this.bind(el, binding); this.bind(el, binding);
this.autoFocus(el, binding); this.autoElementFocus(el, binding);
} }
el.setAttribute('data-pd-focustrap', true); 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_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = 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 || {}; const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`); let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`);