Merge pull request #10964 from Jarsen136/issue-10951

fix: Offer expiration dropdown moving on scroll
kodadot · Sep 11, 2024 · 76bdc5a · 76bdc5a
2 parents 8ec7c24 + b03b640
commit 76bdc5a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/components/offer/OfferExpirationSelector.vue b/components/offer/OfferExpirationSelector.vue
@@ -5,6 +5,7 @@
     :triggers="['click']"
     position="bottom-left"
     append-to-body
+    close-menu-on-move
     class="w-full"
     menu-class="!min-w-[8rem]"
   >

diff --git a/libs/ui/src/components/NeoDropdown/NeoDropdown.vue b/libs/ui/src/components/NeoDropdown/NeoDropdown.vue
@@ -1,5 +1,6 @@
 <script>
 import { ODropdown } from '@oruga-ui/oruga-next'
+import { useElementBounding } from '@vueuse/core'
 
 export default {
   mixins: [ODropdown],
@@ -12,7 +13,10 @@ export default {
       type: Boolean,
       default: false,
     },
-
+    closeMenuOnMove: {
+      type: Boolean,
+      default: false,
+    },
     position: {
       type: String,
       validator: (value) => {
@@ -90,6 +94,9 @@ export default {
     else {
       this.autoPosition = this.position
     }
+    if (this.closeMenuOnMove) {
+      watch(useElementBounding(this.$refs.trigger).top, this.onTriggerMove)
+    }
   },
   onBeforeUnmount() {
     window.removeEventListener('resize', this.calcDropdownPosition)
@@ -105,6 +112,11 @@ export default {
           : 'left'
       this.autoPosition = this.position.replace('auto', side)
     },
+    onTriggerMove() {
+      if (this.isActive) {
+        this.isActive = false
+      }
+    },
   },
 }
 </script>