saving some work on focus trap

shell/components/AppModal.vue

@@ -1,6 +1,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useBasicSetupFocusTrap,
+  getFirstFocusableElement,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
 
 export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
@@ -10,7 +15,8 @@
   emits: ['close'],
 
   inheritAttrs: false,
-  props:        {
+
+  props: {
     /**
      * If set to false, it will not be possible to close modal by clicking on
      * the background or by pressing Esc key.
@@ -80,7 +86,25 @@
     returnFocusFirstIterableNodeSelector: {
       type:    String,
       default: DEFAULT_ITERABLE_NODE_SELECTOR,
-    }
+    },
+    /**
+     * trigger focus trap - but watcher based
+     */
+    triggerFocusTrapWatcherBased: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * watcher-based focus trap variable to watch
+     */
+    focusTrapWatcherBasedVariable: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return { fakeWatchVar: true };
   },
   computed: {
     modalWidth(): string {
@@ -131,9 +155,23 @@
         };
       }
 
-      useBasicSetupFocusTrap('#modal-container-element', opts);
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => props.focusTrapWatcherBasedVariable || 'fakeWatchVar', '#modal-container-element', opts, true);
+
+      // if (!props.triggerFocusTrapWatcherBased) {
+      //   useBasicSetupFocusTrap('#modal-container-element', opts);
+      // }
     }
   },
+  // created() {
+  //   // This usecase is to cover the PromptModal scenario where it's renders a generic component inside.
+  //   // Due to the architecture of the PromptModal it needs to be handled with a watcher based focus trap
+  //   // but with a dedicated unmount hook
+  //   if (this.triggerFocusTrapWatcherBased) {
+  //     const opts:any = DEFAULT_FOCUS_TRAP_OPTS;
+
+  //     useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => this.focusTrapWatcherBasedVariable, '#modal-container-element', opts, true);
+  //   }
+  // },
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },

shell/components/Dialog.vue

@@ -41,6 +41,8 @@
   },
 
   data() {
+    console.error('ON DIALOG COMPONENT....');
+
     return { closed: false };
   },
 

shell/components/__tests__/PromptModal.test.ts

@@ -0,0 +1,51 @@
+import { nextTick } from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
+import PromptModal from '@shell/components/PromptModal.vue';
+import GenericPrompt from '@shell/dialog/GenericPrompt.vue';
+import { createStore } from 'vuex';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+import { CAPI, NORMAN } from '@shell/config/types';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+
+describe('component: PromptModal', () => {
+  const store = createStore({
+    modules: {
+      'action-menu': {
+        namespaced: true,
+        state:      {
+          showModal: true,
+          modalData: {
+            whatever:            true,
+            closeOnClickOutside: true
+          }
+        },
+      },
+    },
+    getters: {
+      'type-map/importDialog': () => () => GenericPrompt,
+      'i18n/exists':           () => jest.fn(),
+      'i18n/t':                jest.fn()
+    },
+    // actions: { 'management/findAll': jest.fn().mockResolvedValue(snapShots), 'rancher/findAll': jest.fn().mockResolvedValue([]) }
+  });
+
+  it('should emit copied after click', async() => {
+    document.body.innerHTML = '<div id="modals"></div>';
+    const wrapper = mount(PromptModal,
+      {
+        attachTo: document.body,
+        data() {
+          return { opened: true };
+        },
+        global: { mocks: { $store: store } }
+      }
+    );
+
+    console.log(document.querySelector('#modals').innerHTML);
+
+    // await wrapper.find('code').trigger('click');
+
+    expect(wrapper.vm.opened).toBe(true);
+  });
+});

shell/composables/focusTrap.ts

@@ -46,12 +46,14 @@ export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:
   });
 }
 
-export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS, useUnmountHook = false) {
   let focusTrapInstance: FocusTrap;
   let focusEl;
 
+  console.error('RUNNING WATCHER FOCUS TRAP');
   watch(watchVar, (neu) => {
-    if (neu) {
+    console.error('inside watcher');
+    if (neu && !focusTrapInstance) {
       nextTick(() => {
         focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
 
@@ -61,8 +63,16 @@ export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, f
           focusTrapInstance.activate();
         });
       });
-    } else if (!neu && Object.keys(focusTrapInstance).length) {
+    } else if (!neu && Object.keys(focusTrapInstance).length && !useUnmountHook) {
       focusTrapInstance.deactivate();
     }
-  });
+  }, { immediate: true });
+
+  if (useUnmountHook) {
+    onBeforeUnmount(() => {
+      if (Object.keys(focusTrapInstance).length) {
+        focusTrapInstance.deactivate();
+      }
+    });
+  }
 }

shell/dialog/GenericPrompt.vue

@@ -98,6 +98,7 @@ export default {
           :label="err"
         />
         <div class="buttons">
+          ALEX
           <button
             class="btn role-secondary mr-10"
             @click="close"