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

Fixed #1775 - Cannot select date in calendar in small viewports

pull/1792/head
mertsincan 2021-11-18 10:13:07 +03:00
parent e81c0d1106
commit ad894855eb
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/calendar/Calendar.vue
View File

@ -5,7 +5,7 @@
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<Teleport :to="appendTarget" :disabled="appendDisabled">
<transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick">
<div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick" @mouseup="onOverlayMouseUp">
<template v-if="!timeOnly">
<div class="p-datepicker-group-container">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
@ -2131,6 +2131,9 @@ export default {
});
}
},
onOverlayMouseUp(event) {
this.onOverlayClick(event);
},
createResponsiveStyle() {
if (this.numberOfMonths > 1 && this.responsiveOptions) {
if (!this.responsiveStyleElement) {

23
src/components/datatable/ColumnFilter.vue
View File

@ -9,7 +9,7 @@
<button v-if="showClearButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
<Teleport to="body">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
<div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
<component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
<template v-if="display === 'row'">
<ul class="p-column-filter-row-items">
@ -346,7 +346,15 @@ export default {
hide() {
this.overlayVisible = false;
},
onContentClick() {
onContentClick(event) {
this.selfClick = true;
OverlayEventBus.emit('overlay-click', {
originalEvent: event,
target: this.overlay
});
},
onContentMouseDown() {
this.selfClick = true;
},
onOverlayEnter(el) {
@ -360,7 +368,7 @@ export default {
this.bindResizeListener();
this.overlayEventListener = (e) => {
if (this.overlay.contains(e.target)) {
if (!this.isOutsideClicked(e.target)) {
this.selfClick = true;
}
}
@ -383,13 +391,16 @@ export default {
overlayRef(el) {
this.overlay = el;
},
isTargetClicked(event) {
return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
isOutsideClicked(target) {
return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
},
isTargetClicked(target) {
return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
this.overlayVisible = false;
}
this.selfClick = false;