diff --git a/src/qComponents/QDrawer/src/QDrawerContainer/index.vue b/src/qComponents/QDrawer/src/QDrawerContainer/index.vue index 043f778f..8b5e5fa7 100644 --- a/src/qComponents/QDrawer/src/QDrawerContainer/index.vue +++ b/src/qComponents/QDrawer/src/QDrawerContainer/index.vue @@ -149,6 +149,7 @@ export default defineComponent({ const drawer = ref>(null); const isShown = ref(false); const zIndex = getConfig('nextZIndex'); + let isFocusTrapEnabled: boolean = false; const drawerStyle = computed>>( () => ({ @@ -213,10 +214,24 @@ export default defineComponent({ }); }; + const enableFocusTrap = (): void => { + if (isFocusTrapEnabled) return; + + document.addEventListener('focus', handleDocumentFocus, true); + isFocusTrapEnabled = true; + }; + + const disableFocusTrap = (): void => { + if (!isFocusTrapEnabled) return; + + document.removeEventListener('focus', handleDocumentFocus, true); + isFocusTrapEnabled = false; + }; + onMounted(async () => { document.body.appendChild(instance?.vnode.el as Node); document.documentElement.style.overflow = 'hidden'; - document.addEventListener('focus', handleDocumentFocus, true); + enableFocusTrap(); await nextTick(); isShown.value = true; @@ -226,13 +241,15 @@ export default defineComponent({ onBeforeUnmount(() => { document.documentElement.style.overflow = ''; - document.removeEventListener('focus', handleDocumentFocus, true); + disableFocusTrap(); if (!props.preventFocusAfterClosing) elementToFocusAfterClosing?.focus(); }); provide('qDrawerContainer', { emitDoneEvent, - emitCloseEvent + emitCloseEvent, + enableFocusTrap, + disableFocusTrap }); return { diff --git a/src/qComponents/QDrawer/src/QDrawerContainer/types.ts b/src/qComponents/QDrawer/src/QDrawerContainer/types.ts index a64acaf1..eb850b3d 100644 --- a/src/qComponents/QDrawer/src/QDrawerContainer/types.ts +++ b/src/qComponents/QDrawer/src/QDrawerContainer/types.ts @@ -3,6 +3,7 @@ import type { Ref, ComputedRef } from 'vue'; import type { Nullable } from '#/helpers'; import type { QDrawerAction } from '../constants'; + import type { QDrawerComponent, QDrawerContent, QDrawerEvent } from '../types'; export type QDrawerContainerPropContent = QDrawerContent; @@ -27,6 +28,8 @@ export interface QDrawerContainerProps { export interface QDrawerContainerProvider { emitDoneEvent: (props: QDrawerEvent) => Promise; emitCloseEvent: () => void; + enableFocusTrap: () => void; + disableFocusTrap: () => void; } export interface QDrawerContainerInstance { diff --git a/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue b/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue index 4a3b57ff..97a4a7ce 100644 --- a/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue +++ b/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue @@ -55,6 +55,7 @@ import { onMounted, nextTick, provide, + inject, onBeforeUnmount } from 'vue'; import type { PropType } from 'vue'; @@ -63,7 +64,9 @@ import { getConfig } from '@/qComponents/config'; import { isServer } from '@/qComponents/constants/isServer'; import { QScrollbar } from '@/qComponents/QScrollbar'; -import type { Nullable } from '#/helpers'; +import type { QDrawerContainerProvider } from '@/qComponents'; + +import type { Nullable, Nillable } from '#/helpers'; import { QMessageBoxAction } from '../constants'; import { QMessageBoxContent } from '../QMessageBoxContent'; @@ -163,6 +166,11 @@ export default defineComponent({ setup(props: QMessageBoxContainerProps, ctx): QMessageBoxContainerInstance { const instance = getCurrentInstance(); + const qDrawerContainer = inject>( + 'qDrawerContainer', + null + ); + const messageBox = ref>(null); const isShown = ref(false); const zIndex = getConfig('nextZIndex'); @@ -232,6 +240,8 @@ export default defineComponent({ }; onMounted(async () => { + qDrawerContainer?.disableFocusTrap(); + document.body.appendChild(instance?.vnode.el as Node); document.documentElement.style.overflow = 'hidden'; document.addEventListener('focus', handleDocumentFocus, true); @@ -246,6 +256,8 @@ export default defineComponent({ document.documentElement.style.overflow = ''; document.removeEventListener('focus', handleDocumentFocus, true); if (!props.preventFocusAfterClosing) elementToFocusAfterClosing?.focus(); + + qDrawerContainer?.enableFocusTrap(); }); provide('qMessageBoxContainer', {