js-kompo-utils 1.0.25 → 1.0.27

package/components/VlSelect.vue

@@ -129,6 +129,10 @@ export default {
         optionsKey() {
             this.$nextTick(() => {
                 this.teleportOptions()
+                if (this._panelObserver && this.$refs.selectOptions) {
+                    this._panelObserver.disconnect()
+                    this._panelObserver.observe(this.$refs.selectOptions)
+                }
                 if (this.isFocused) this.refresh()
             })
         },
@@ -209,6 +213,19 @@ export default {
             window.addEventListener('scroll', this._onScroll, true)
             window.addEventListener('resize', this._onResize, { passive: true })
 
+            if (window.visualViewport) {
+                this._onViewportScroll = () => {
+                    if (this._rafId) return
+                    this._rafId = requestAnimationFrame(() => {
+                        this._rafId = null
+                        this.trackPosition()
+                    })
+                }
+                this._onViewportResize = () => this.refresh()
+                window.visualViewport.addEventListener('scroll', this._onViewportScroll)
+                window.visualViewport.addEventListener('resize', this._onViewportResize)
+            }
+
             const opts = this.$refs.selectOptions
             const anchor = this.anchorEl()
             if (typeof ResizeObserver !== 'undefined') {
@@ -227,10 +244,17 @@ export default {
                 })
                 if (anchor) this._anchorObserver.observe(anchor)
             }
-            if (typeof IntersectionObserver !== 'undefined' && anchor) {
+            const inOverlay = !!(anchor && anchor.closest('.kompoModal, .kompoDrawer, .vl-sidebar-l'))
+            if (inOverlay && typeof IntersectionObserver !== 'undefined' && anchor) {
+                let intersectionInitialised = false
                 this._anchorIntersection = new IntersectionObserver((entries) => {
                     const entry = entries[entries.length - 1]
-                    if (entry && entry.intersectionRatio === 0) this.blur()
+                    if (!entry) return
+                    if (!intersectionInitialised) {
+                        intersectionInitialised = true
+                        return
+                    }
+                    if (entry.intersectionRatio === 0) this.blur()
                 }, { threshold: 0 })
                 this._anchorIntersection.observe(anchor)
             }
@@ -245,6 +269,16 @@ export default {
             }
             window.removeEventListener('scroll', this._onScroll, true)
             window.removeEventListener('resize', this._onResize)
+            if (window.visualViewport) {
+                if (this._onViewportScroll) {
+                    window.visualViewport.removeEventListener('scroll', this._onViewportScroll)
+                    this._onViewportScroll = null
+                }
+                if (this._onViewportResize) {
+                    window.visualViewport.removeEventListener('resize', this._onViewportResize)
+                    this._onViewportResize = null
+                }
+            }
             if (this._panelObserver) {
                 this._panelObserver.disconnect()
                 this._panelObserver = null
@@ -294,8 +328,11 @@ export default {
 
             this.$nextTick(() => {
                 const optsHeight = opts.offsetHeight
-                const spaceBelow = window.innerHeight - rect.bottom
-                const spaceAbove = rect.top
+                const vv = window.visualViewport
+                const viewportHeight = vv ? vv.height : window.innerHeight
+                const viewportTop = vv ? vv.offsetTop : 0
+                const spaceBelow = (viewportTop + viewportHeight) - rect.bottom
+                const spaceAbove = rect.top - viewportTop
                 const shouldFlip = this.forceUp || (spaceBelow < optsHeight && spaceAbove > spaceBelow)
                 this.flipUp = shouldFlip
                 if (shouldFlip) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "",
   "main": "app.js",
   "scripts": {