fix: focusTrap conflict when using QMessageBox inside QDrawer (#348)

altai-ui · Dec 21, 2022 · 0405ba6 · 0405ba6
1 parent 9a3e6d1
commit 0405ba6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git 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<Nullable<HTMLElement>>(null);
     const isShown = ref<boolean>(false);
     const zIndex = getConfig('nextZIndex');
+    let isFocusTrapEnabled: boolean = false;
 
     const drawerStyle = computed<Record<string, Nullable<string | number>>>(
       () => ({
@@ -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<QDrawerContainerProvider>('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
@@ -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<void>;
   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
@@ -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<Nillable<QDrawerContainerProvider>>(
+      'qDrawerContainer',
+      null
+    );
+
     const messageBox = ref<Nullable<HTMLElement>>(null);
     const isShown = ref<boolean>(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<QMessageBoxContainerProvider>('qMessageBoxContainer', {