@eturnity/eturnity_reusable_components 9.25.6 → 9.25.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.6",
+  "version": "9.25.7",
   "files": [
     "dist",
     "src"

package/src/components/threeDots/index.vue

@@ -12,12 +12,13 @@
       <DotItem />
       <DotItem />
     </ButtonContainer>
-    <DropdownContainer
-      ref="dropdownContainer"
-      :container-width="childOpen ? 440 : 240"
-      @click.stop
-    >
-      <template v-if="isOpen">
+    <Teleport to="body">
+      <DropdownContainer
+        v-if="isOpen"
+        ref="dropdownContainer"
+        :container-width="childOpen ? 440 : 240"
+        @click.stop
+      >
         <LoadingContainer v-if="isLoading">
           <Spinner />
         </LoadingContainer>
@@ -82,8 +83,8 @@
             </span>
           </OptionItem>
         </OptionsContainer>
-      </template>
-    </DropdownContainer>
+      </DropdownContainer>
+    </Teleport>
   </PageContainer>
 </template>
 
@@ -194,8 +195,10 @@
     containerWidth: Number,
   }
   const DropdownContainer = styled('div', dropdownAttrs)`
-    z-index: 99;
-    position: absolute;
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
     display: grid;
     grid-template-columns: auto auto;
   `
@@ -382,19 +385,36 @@
         theme,
       }
     },
+    beforeUnmount() {
+      this.removeListeners()
+    },
     methods: {
       toggleButton() {
         this.isOpen = !this.isOpen
 
         if (this.isOpen) {
-          this.setContextMenuPosition()
+          this.$nextTick(() => this.setContextMenuPosition())
           window.addEventListener('resize', this.toggleButton)
+          window.addEventListener('scroll', this.onWindowScroll, true)
           document.addEventListener('click', this.clickOutside)
         } else {
-          window.removeEventListener('resize', this.toggleButton)
-          document.removeEventListener('click', this.clickOutside)
+          this.removeListeners()
         }
       },
+      removeListeners() {
+        window.removeEventListener('resize', this.toggleButton)
+        window.removeEventListener('scroll', this.onWindowScroll, true)
+        document.removeEventListener('click', this.clickOutside)
+      },
+      onWindowScroll(event) {
+        // Scrolling inside the options list must not close the dropdown
+        const dropdownRef = this.$refs.dropdownContainer
+        const contextMenu = dropdownRef?.$el ?? dropdownRef
+        if (contextMenu && contextMenu.contains(event.target)) {
+          return
+        }
+        this.toggleButton()
+      },
       setContextMenuPosition() {
         const dropdownRef = this.$refs.dropdownContainer
         const pageRef = this.$refs.pageContainer
@@ -408,70 +428,39 @@
           return
         }
         const rectButton = button.getBoundingClientRect()
-        const relativeParent =
-          this.findRelativeParent(contextMenu) || document.documentElement
-        if (
-          !relativeParent ||
-          typeof relativeParent.getBoundingClientRect !== 'function'
-        ) {
-          return
-        }
-        const rectRelativeParent = relativeParent.getBoundingClientRect()
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
         if (this.dropdownPosition == 'vertical') {
           // Position horizontally (left/right/center)
           if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left + 'px'
+            contextMenu.style.left = rectButton.left + 'px'
           } else {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 'px'
+            contextMenu.style.left = rectButton.right + 'px'
             contextMenu.style.transform = 'translateX(-100%)'
           }
           // Position vertically (above/below)
           if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
+            contextMenu.style.top = rectButton.bottom + 5 + 'px'
           } else {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top - 5 + 'px'
+            contextMenu.style.top = rectButton.top - 5 + 'px'
             contextMenu.style.transform += ' translateY(-100%)'
           }
         } else {
           if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 5 + 'px'
+            contextMenu.style.left = rectButton.right + 5 + 'px'
           } else {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left - 5 + 'px'
+            contextMenu.style.left = rectButton.left - 5 + 'px'
             contextMenu.style.transform = 'translateX(-100%)'
           }
           if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top + 'px'
+            contextMenu.style.top = rectButton.top + 'px'
           } else {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 'px'
+            contextMenu.style.top = rectButton.bottom + 'px'
             contextMenu.style.transform += ' translateY(-100%)'
           }
         }
       },
-      findRelativeParent(element) {
-        while (element.parentElement) {
-          if (
-            window.getComputedStyle(element.parentElement).position ===
-              'relative' ||
-            window.getComputedStyle(element.parentElement).position ===
-              'absolute'
-          ) {
-            return element.parentElement
-          }
-          element = element.parentElement
-        }
-        return null
-      },
       determineElementQuarter(element, rect) {
         const viewportWidth = window.innerWidth
         const viewportHeight = window.innerHeight
@@ -509,7 +498,13 @@
         this.isOpen = false
       },
       clickOutside(event) {
-        if (this.$el.contains(event.target) || !this.isOpen) {
+        if (!this.isOpen || this.$el.contains(event.target)) {
+          return
+        }
+        // The dropdown is teleported to body, so it is not inside this.$el
+        const dropdownRef = this.$refs.dropdownContainer
+        const contextMenu = dropdownRef?.$el ?? dropdownRef
+        if (contextMenu && contextMenu.contains(event.target)) {
           return
         }
         this.toggleButton()