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

package/package.json

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

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

@@ -162,6 +162,7 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
@@ -208,7 +209,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport } from 'vue'
+  import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -392,10 +393,12 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
     position: absolute;
     top: 0px;
     left: 0px;
@@ -669,6 +672,13 @@
         animationFrameId: null,
       }
     },
+    setup() {
+      const rcModalRef = inject('rcModalRef')
+
+      return {
+        rcModalRef,
+      }
+    },
     computed: {
       optionLength() {
         if (this.isDropdownOpen) {
@@ -724,6 +734,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.rcModalRef
+      },
     },
     watch: {
       value(val) {

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

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="rcModalRef"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -30,6 +31,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -148,44 +150,34 @@
         default: 'auto',
       },
     },
+    setup() {
+      const rcModalRef = ref(null)
+      provide('rcModalRef', rcModalRef)
+
+      return {
+        rcModalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,
         handler(isOpen) {
-          this.setElementsStyle(isOpen)
-          if (!isOpen) {
+          document.body.style.overflow = isOpen ? 'hidden' : null
+          if (isOpen) {
+            window.addEventListener('keydown', this.handleKeyDown)
+          } else {
             window.removeEventListener('keydown', this.handleKeyDown)
           }
         },
       },
     },
     beforeUnmount() {
-      this.setElementsStyle(false)
+      document.body.style.overflow = null
       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() {
-        this.setElementsStyle(false)
+        document.body.style.overflow = null
         this.$emit('on-close')
       },
       handleKeyDown({ key }) {