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

Merge pull request #23 from navedqb/5016--fix-sidebar-escape-key-issue 

fix: fix sidebar escape keydown issue
pull/5018/head
navedqb 2024-01-02 15:27:00 +05:30 committed by GitHub
parent 4c57243a42 ca5a62d21d
commit f2b081e892
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/lib/sidebar/Sidebar.vue
View File

@ -2,7 +2,7 @@
<Portal> <Portal>
<div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')"> <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
<transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')"> <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }"> <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
<slot v-if="$slots.container" name="container" :onClose="hide" :closeCallback="hide"></slot> <slot v-if="$slots.container" name="container" :onClose="hide" :closeCallback="hide"></slot>
<template v-else> <template v-else>
<div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')"> <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
@ -49,6 +49,7 @@ export default {
headerContainer: null, headerContainer: null,
closeButton: null, closeButton: null,
outsideClickListener: null, outsideClickListener: null,
documentKeydownListener: null,
updated() { updated() {
if (this.visible) { if (this.visible) {
this.containerVisible = this.visible; this.containerVisible = this.visible;
@ -71,6 +72,7 @@ export default {
onEnter() { onEnter() {
this.$emit('show'); this.$emit('show');
this.focus(); this.focus();
this.bindDocumentKeyDownListener()
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal); ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
@ -92,6 +94,7 @@ export default {
ZIndexUtils.clear(this.mask); ZIndexUtils.clear(this.mask);
} }
this.unbindDocumentKeyDownListener();
this.containerVisible = false; this.containerVisible = false;
this.disableDocumentSettings(); this.disableDocumentSettings();
this.$emit('after-hide'); this.$emit('after-hide');
@ -154,6 +157,18 @@ export default {
closeButtonRef(el) { closeButtonRef(el) {
this.closeButton = el; this.closeButton = el;
}, },
bindDocumentKeyDownListener() {
if (!this.documentKeydownListener) {
this.documentKeydownListener = this.onKeydown;
document.addEventListener('keydown', this.documentKeydownListener);
}
},
unbindDocumentKeyDownListener() {
if (this.documentKeydownListener) {
document.removeEventListener('keydown', this.documentKeydownListener);
this.documentKeydownListener = null;
}
},
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {