@redseed/redseed-ui-vue3 8.40.1 → 8.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.40.1",
+    "version": "8.41.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/FormField/FormFieldCombobox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
-import { onClickOutside, useElementBounding } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
@@ -326,40 +326,53 @@ onClickOutside(comboboxElement, () => {
     }
 })
 
-const inputElementBounding = useElementBounding(inputElement)
-
 function calculateDropdownPosition() {
-    if (!dropdownElement.value) return
+    if (!dropdownElement.value || !inputElement.value) return
 
+    const bounding = inputElement.value.getBoundingClientRect()
     const viewportHeight = window.innerHeight
     const dropdownElementHeight = dropdownElement.value.offsetHeight
-    const spaceAboveInput = inputElementBounding.top.value
-    const spaceBelowInput = viewportHeight - inputElementBounding.bottom.value
+    const spaceAboveInput = bounding.top
+    const spaceBelowInput = viewportHeight - bounding.bottom
 
-    dropdownElement.value.style.width = `${inputElementBounding.width.value}px`
-    dropdownElement.value.style.left = `${inputElementBounding.left.value}px`
+    dropdownElement.value.style.width = `${bounding.width}px`
+    dropdownElement.value.style.left = `${bounding.left}px`
 
     if (spaceAboveInput <= dropdownElementHeight && spaceBelowInput <= dropdownElementHeight) {
         dropdownElement.value.style.top = '0'
         dropdownElement.value.style.bottom = 'auto'
         return
     } else if (spaceBelowInput > dropdownElementHeight) {
-        dropdownElement.value.style.top = `${inputElementBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${bounding.bottom + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
         return
     } else if (spaceAboveInput > dropdownElementHeight) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelowInput + inputElementBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.bottom = `${spaceBelowInput + bounding.height + 8 - window.scrollY}px`
         return
     }
 }
 
+function handleScroll(event) {
+    if (dropdownElement.value?.contains(event.target)) return
+    calculateDropdownPosition()
+}
+
+watch(isOpen, (nowOpen) => {
+    if (nowOpen) {
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true })
+    } else {
+        window.removeEventListener('scroll', handleScroll, { capture: true })
+    }
+})
+
 onMounted(() => {
     window.addEventListener('resize', calculateDropdownPosition)
 })
 
 onUnmounted(() => {
     window.removeEventListener('resize', calculateDropdownPosition)
+    window.removeEventListener('scroll', handleScroll, { capture: true })
 })
 
 defineExpose({

package/src/components/FormField/FormFieldSearchAsync.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue'
-import { onClickOutside, useElementBounding } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
@@ -245,39 +245,52 @@ onClickOutside(rootElement, () => {
 // Measure the whole field box (icon prefix + input), not the inner <input> —
 // the input sits to the right of the prefix and is narrower, so anchoring to
 // it would leave the dropdown shifted right and narrower than the field.
-const fieldElementBounding = useElementBounding(fieldElement)
-
 function calculateDropdownPosition() {
-    if (!dropdownElement.value) return
+    if (!dropdownElement.value || !fieldElement.value) return
 
+    const bounding = fieldElement.value.getBoundingClientRect()
     const viewportHeight = window.innerHeight
     const dropdownHeight = dropdownElement.value.offsetHeight
-    const spaceAbove = fieldElementBounding.top.value
-    const spaceBelow = viewportHeight - fieldElementBounding.bottom.value
+    const spaceAbove = bounding.top
+    const spaceBelow = viewportHeight - bounding.bottom
 
     dropdownElement.value.style.width = props.dropdownWidth != null
         ? (typeof props.dropdownWidth === 'number' ? `${props.dropdownWidth}px` : props.dropdownWidth)
-        : `${fieldElementBounding.width.value}px`
-    dropdownElement.value.style.left = `${fieldElementBounding.left.value}px`
+        : `${bounding.width}px`
+    dropdownElement.value.style.left = `${bounding.left}px`
 
     if (spaceAbove <= dropdownHeight && spaceBelow <= dropdownHeight) {
         dropdownElement.value.style.top = '0'
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceBelow > dropdownHeight) {
-        dropdownElement.value.style.top = `${fieldElementBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${bounding.bottom + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
     } else if (spaceAbove > dropdownHeight) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelow + fieldElementBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.bottom = `${spaceBelow + bounding.height + 8 - window.scrollY}px`
     }
 }
 
+function handleScroll(event) {
+    if (dropdownElement.value?.contains(event.target)) return
+    calculateDropdownPosition()
+}
+
+watch(isOpen, (nowOpen) => {
+    if (nowOpen) {
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true })
+    } else {
+        window.removeEventListener('scroll', handleScroll, { capture: true })
+    }
+})
+
 onMounted(() => {
     window.addEventListener('resize', calculateDropdownPosition)
 })
 
 onUnmounted(() => {
     window.removeEventListener('resize', calculateDropdownPosition)
+    window.removeEventListener('scroll', handleScroll, { capture: true })
 })
 
 defineExpose({

package/src/components/FormField/FormFieldSelect.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, useAttrs } from 'vue'
-import { onClickOutside, useElementBounding } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 import FormFieldSlot from './FormFieldSlot.vue'
 import { ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/outline'
 import { useFormFieldA11y } from '../../composables/useFormFieldA11y.js'
@@ -144,10 +144,14 @@ onClickOutside(formFieldSelectElement, () => close())
 
 // Anchor dropdown to the visible trigger (button on desktop, select on mobile)
 const anchorElement = computed(() => triggerElement.value || selectElement.value)
-const anchorBounding = useElementBounding(anchorElement)
 
 function calculateDropdownPosition() {
-    if (!dropdownElement.value) return
+    if (!dropdownElement.value || !anchorElement.value) return
+
+    // Preserve scrollTop before the reset so scroll-chaining (wheel past the
+    // list's boundary chains to the page, triggering this handler) cannot snap
+    // the list back to the top when maxHeight is cleared and a reflow occurs.
+    const savedScrollTop = dropdownElement.value.scrollTop
 
     // Reset inline positioning before measuring so a previously-applied
     // max-height (from an earlier constrained open) doesn't pollute the
@@ -157,12 +161,13 @@ function calculateDropdownPosition() {
     dropdownElement.value.style.top = ''
     dropdownElement.value.style.bottom = ''
 
+    const bounding = anchorElement.value.getBoundingClientRect()
     const dropdownElementHeight = dropdownElement.value.offsetHeight
     const viewportHeight = window.innerHeight
-    const spaceAbove = anchorBounding.top.value
-    const spaceBelow = viewportHeight - anchorBounding.bottom.value
+    const spaceAbove = bounding.top
+    const spaceBelow = viewportHeight - bounding.bottom
 
-    dropdownElement.value.style.minWidth = `${anchorBounding.width.value}px`
+    dropdownElement.value.style.minWidth = `${bounding.width}px`
 
     /**
      * Clamp the dropdown to the viewport horizontally.
@@ -176,13 +181,13 @@ function calculateDropdownPosition() {
     dropdownElement.value.style.maxWidth = `${viewportWidth - safeMargin * 2}px`
 
     // Temporarily position at trigger left so we can measure actual width
-    dropdownElement.value.style.left = `${anchorBounding.left.value}px`
+    dropdownElement.value.style.left = `${bounding.left}px`
     const dropdownWidth = dropdownElement.value.offsetWidth
-    const rightOverflow = (anchorBounding.left.value + dropdownWidth + safeMargin) - viewportWidth
+    const rightOverflow = (bounding.left + dropdownWidth + safeMargin) - viewportWidth
 
     // Shift left if the dropdown overflows the right edge
     if (rightOverflow > 0) {
-        const clampedLeft = Math.max(safeMargin, anchorBounding.left.value - rightOverflow)
+        const clampedLeft = Math.max(safeMargin, bounding.left - rightOverflow)
         dropdownElement.value.style.left = `${clampedLeft}px`
     }
 
@@ -192,18 +197,21 @@ function calculateDropdownPosition() {
     const verticalOffset = 16
 
     if (spaceBelow > dropdownElementHeight) {
-        dropdownElement.value.style.top = `${anchorBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${bounding.bottom + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
+        dropdownElement.value.scrollTop = savedScrollTop
         return
     } else if (spaceAbove > spaceBelow) {
         dropdownElement.value.style.top = 'auto'
-        dropdownElement.value.style.bottom = `${spaceBelow + anchorBounding.height.value + 8 - window.scrollY}px`
+        dropdownElement.value.style.bottom = `${spaceBelow + bounding.height + 8 - window.scrollY}px`
         dropdownElement.value.style.maxHeight = `${spaceAbove - verticalOffset}px`
+        dropdownElement.value.scrollTop = savedScrollTop
         return
     } else {
-        dropdownElement.value.style.top = `${anchorBounding.bottom.value + window.scrollY}px`
+        dropdownElement.value.style.top = `${bounding.bottom + window.scrollY}px`
         dropdownElement.value.style.bottom = 'auto'
         dropdownElement.value.style.maxHeight = `${spaceBelow - verticalOffset}px`
+        dropdownElement.value.scrollTop = savedScrollTop
         return
     }
 }
@@ -212,6 +220,19 @@ function handleResize() {
     calculateDropdownPosition()
 }
 
+function handleScroll(event) {
+    if (dropdownElement.value?.contains(event.target)) return
+    calculateDropdownPosition()
+}
+
+watch(isOpen, (nowOpen) => {
+    if (nowOpen) {
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true })
+    } else {
+        window.removeEventListener('scroll', handleScroll, { capture: true })
+    }
+})
+
 onMounted(() => {
     isMobileDevice.value = 'ontouchstart' in window
         || (navigator.maxTouchPoints && navigator.maxTouchPoints > 0)
@@ -220,6 +241,7 @@ onMounted(() => {
 
 onUnmounted(() => {
     window.removeEventListener('resize', handleResize)
+    window.removeEventListener('scroll', handleScroll, { capture: true })
 })
 
 defineExpose({