@eturnity/eturnity_reusable_components 7.4.3-EPDM-9694.0 → 7.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.3-EPDM-9694.0",
+  "version": "7.4.4",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/filter/filterSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-wrapper>
+  <container-wrapper @click="$emit('on-container-click')">
     <upper-container v-if="filterViews && filterViews.length">
       <view-container :maxWidth="activeView.length">
         <select-component

package/src/components/filter/index.vue

@@ -19,6 +19,7 @@
       @on-apply-current-view="onApplyCurrentView()"
       @on-prevent-close="onPreventClose($event)"
       @on-reset-filters="onResetFilters()"
+      @on-container-click="onContainerClick()"
       :hasActiveView="hasActiveView"
       :activeView="activeView"
       :activeLanguage="activeLanguage"
@@ -82,9 +83,19 @@ export default {
     onToggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
     },
+    onContainerClick() {
+      // due to newer versions of Chrome (121), contains() is not always working.
+      // So, we need to add this so that the filter modal won't close
+      // when we open a dropdown. EPDM-9732
+      this.preventOutsideClick = true
+      setTimeout(() => {
+        this.preventOutsideClick = false
+      }, 100)
+    },
     clickOutside(event) {
+      const target = event.target
       if (
-        !this.$refs.dropdown.$el.contains(event.target) &&
+        !this.$refs.dropdown.$el.contains(target) &&
         !this.preventOutsideClick
       ) {
         this.isDropdownOpen = false

package/src/components/modals/modal/index.vue

@@ -3,6 +3,7 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
+    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
@@ -20,13 +21,10 @@
 </template>
 
 <script>
-// Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
-// 1. On clicking the “escape” key, close the modal onCloseModal()
-// 2. Always prevent outside close
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
@@ -120,6 +118,10 @@ export default {
       required: true,
       default: false
     },
+    preventOutsideClose: {
+      required: false,
+      default: false
+    },
     isLoading: {
       required: false,
       default: false
@@ -137,27 +139,20 @@ export default {
       default: 'fixed'
     }
   },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.handleKeyDown)
-  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    handleKeyDown({ key }) {
-      if (key === 'Escape') {
-        this.onCloseModal()
+    onOutsideClose() {
+      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
+      if (!this.preventOutsideClose) {
+        this.$emit('on-close')
       }
     }
   },
   watch: {
-    isOpen: function (isOpen) {
-      document.body.style.overflow = isOpen ? 'hidden' : ''
-      if (isOpen) {
-        window.addEventListener('keydown', this.handleKeyDown)
-      } else {
-        window.removeEventListener('keydown', this.handleKeyDown)
-      }
+    isOpen: function (newVal) {
+      document.body.style.overflow = newVal ? 'hidden' : ''
     }
   }
 }