js-kompo-utils 1.0.25 → 1.0.26

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,18 @@ export default {
             window.addEventListener('scroll', this._onScroll, true)
             window.addEventListener('resize', this._onResize, { passive: true })
 
+            if (window.visualViewport) {
+                this._onViewportChange = () => {
+                    if (this._rafId) return
+                    this._rafId = requestAnimationFrame(() => {
+                        this._rafId = null
+                        this.refresh()
+                    })
+                }
+                window.visualViewport.addEventListener('resize', this._onViewportChange)
+                window.visualViewport.addEventListener('scroll', this._onViewportChange)
+            }
+
             const opts = this.$refs.selectOptions
             const anchor = this.anchorEl()
             if (typeof ResizeObserver !== 'undefined') {
@@ -245,6 +261,11 @@ export default {
             }
             window.removeEventListener('scroll', this._onScroll, true)
             window.removeEventListener('resize', this._onResize)
+            if (this._onViewportChange && window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', this._onViewportChange)
+                window.visualViewport.removeEventListener('scroll', this._onViewportChange)
+                this._onViewportChange = null
+            }
             if (this._panelObserver) {
                 this._panelObserver.disconnect()
                 this._panelObserver = null
@@ -294,8 +315,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.26",
   "description": "",
   "main": "app.js",
   "scripts": {