Remove focus-trap ➖

Author: ikovac

client/admin/components/common/ConfirmationDialog.vue

@@ -15,19 +15,19 @@
 </template>
 
 <script>
-import { withFocusTrap } from '@/common/focustrap';
-
-const el = vm => vm.$children[0].$refs.dialog;
-
 export default {
   name: 'confirmation-dialog',
-  mixins: [withFocusTrap({ el })],
   props: {
     visible: { type: Boolean, default: false },
     heading: { type: String, default: '' },
     message: { type: String, default: 'Are you sure?' },
     action: { type: Function, default: () => true }
   },
+  data() {
+    return {
+      focusTrap: null
+    };
+  },
   computed: {
     show: {
       get() {
@@ -48,11 +48,6 @@ export default {
         this.$emit('confirmed');
       });
     }
-  },
-  watch: {
-    show(val) {
-      this.$nextTick(() => this.focusTrap.toggle(val));
-    }
   }
 };
 </script>

client/admin/components/users/ImportDialog.vue

@@ -75,9 +75,6 @@
 <script>
 import api from '@/admin/api/user';
 import saveAs from 'save-as';
-import { withFocusTrap } from '@/common/focustrap';
-
-const el = vm => vm.$children[0].$refs.dialog;
 
 const inputFormats = {
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
@@ -86,7 +83,6 @@ const inputFormats = {
 
 export default {
   name: 'import-dialog',
-  mixins: [withFocusTrap({ el })],
   data: () => ({
     showDialog: false,
     importing: false,
@@ -113,8 +109,8 @@ export default {
     },
     close() {
       if (this.importing) return;
+      if (this.$refs.fileInput) this.$refs.fileInput.value = null;
       this.filename = null;
-      this.$refs.fileInput.value = null;
       this.resetErrors();
       this.showDialog = false;
     },
@@ -147,11 +143,6 @@ export default {
       this.error = null;
       this.$refs.form?.reset();
     }
-  },
-  watch: {
-    showDialog(val) {
-      this.$nextTick(() => this.focusTrap.toggle(val));
-    }
   }
 };
 </script>

client/admin/components/users/UserDialog.vue

@@ -80,9 +80,6 @@ import humanize from 'humanize-string';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
 import { Role } from '@/../common/config';
-import { withFocusTrap } from '@/common/focustrap';
-
-const el = vm => vm.$children[0].$refs.dialog;
 
 const resetUser = () => {
   return {
@@ -95,7 +92,6 @@ const resetUser = () => {
 
 export default {
   name: 'user-dialog',
-  mixins: [withFocusTrap({ el })],
   props: {
     visible: { type: Boolean, default: false },
     userData: { type: Object, default: () => ({}) }
@@ -137,7 +133,6 @@ export default {
   },
   watch: {
     show(val) {
-      this.$nextTick(() => this.focusTrap.toggle(val));
       if (!val) return;
       this.$refs.form?.reset();
       if (!isEmpty(this.userData)) this.user = cloneDeep(this.userData);