@eturnity/eturnity_reusable_components 8.7.5-qa-16-02-21.1 → 8.7.5-qa-16-02-21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.5-qa-16-02-21.1",
+  "version": "8.7.5-qa-16-02-21.3",
   "files": [
     "dist",
     "src"

package/src/components/inputs/select/index.vue

@@ -142,6 +142,7 @@
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -854,7 +855,6 @@
         })
       },
       clickOutside(event) {
-        console.log('clickOutside')
         const dropdownRef = this.$refs.dropdown
         // we need to prevent closing on selecting an option, because in the case of
         // a disabled option, we don't want to close the dropdown

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

@@ -48,13 +48,13 @@
       props.backdrop == 'dark'
         ? 'rgba(0, 0, 0, 0.4)'
         : 'rgba(255, 255, 255, 0.9)'};
-    z-index: 99999;
+    z-index: 9999999;
     overflow: auto;
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -152,22 +152,40 @@
       isOpen: {
         immediate: true,
         handler(isOpen) {
-          document.body.style.overflow = isOpen ? 'hidden' : null
-          if (isOpen) {
-            window.addEventListener('keydown', this.handleKeyDown)
-          } else {
+          this.setElementsStyle(isOpen)
+          if (!isOpen) {
             window.removeEventListener('keydown', this.handleKeyDown)
           }
         },
       },
     },
     beforeUnmount() {
-      document.body.style.overflow = null
+      this.setElementsStyle(false)
       window.removeEventListener('keydown', this.handleKeyDown)
     },
     methods: {
+      setElementsStyle(isOpen) {
+        this.setSelectDropdownsStyle(isOpen)
+        document.body.style.overflow = isOpen ? 'hidden' : null
+      },
+      setSelectDropdownsStyle(isOpen) {
+        const zIndex = isOpen ? '9999999' : '99999'
+        const items = document.getElementsByClassName('rc-select-dropdown')
+
+        const updateZIndex = () => {
+          Array.from(items).forEach((item) => {
+            item.style.zIndex = zIndex
+          })
+        }
+
+        if (isOpen) {
+          setTimeout(updateZIndex, 100)
+        } else {
+          updateZIndex()
+        }
+      },
       onCloseModal() {
-        document.body.style.overflow = null
+        this.setElementsStyle(false)
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {