From 006d4cf1ffcefca5d9120defa1fc67bd921e9ef5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 9 Aug 2025 19:49:12 +0200
Subject: [PATCH] Improve mobile keyboard handling and viewport detection

- Disable transitions and make menu persistent on mobile devices
- Add keyboard open/close detection to prevent unwanted viewport updates
- Differentiate between keyboard events and actual viewport changes
- Improve resize debouncing with longer delays for mobile
- Handle orientation changes separately from keyboard events
---
 components/PhoneInputWrapper.vue  |  4 ++-
 composables/useMobileDetection.ts | 48 +++++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index 97b311d..cbe39b1 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -24,8 +24,10 @@
           location="bottom start"
           :offset="4"
           :min-width="mobileDetection.isMobile ? '90vw' : '280'"
-          transition="fade-transition"
+          :transition="mobileDetection.isMobile ? 'none' : 'fade-transition'"
           :no-click-animation="true"
+          :persistent="mobileDetection.isMobile"
+          :attach="false"
         >
           <template #activator="{ props: menuProps }">
             <div
diff --git a/composables/useMobileDetection.ts b/composables/useMobileDetection.ts
index 9979b1f..b543cb9 100644
--- a/composables/useMobileDetection.ts
+++ b/composables/useMobileDetection.ts
@@ -83,17 +83,46 @@ function setupListeners() {
   
   let resizeTimeout: NodeJS.Timeout;
   let lastHeight = window.innerHeight;
+  let initialHeight = window.innerHeight;
+  let keyboardOpen = false;
   
   const handleResize = () => {
+    // Don't handle resize if we're in the middle of a transition
+    if (document.hidden) return;
+    
     clearTimeout(resizeTimeout);
     
-    // Debounce and only update if height actually changed
+    // Debounce with longer delay for mobile
+    const debounceDelay = globalState.isMobile ? 300 : 150;
+    
     resizeTimeout = setTimeout(() => {
       const newHeight = window.innerHeight;
+      const heightDiff = newHeight - lastHeight;
+      const absoluteDiff = Math.abs(heightDiff);
       
-      // Only update if there's a significant change (more than 20px)
-      // This prevents minor fluctuations from triggering updates
-      if (Math.abs(newHeight - lastHeight) > 20) {
+      // Detect keyboard open/close on mobile
+      if (globalState.isMobile) {
+        // Keyboard likely opened (viewport got smaller)
+        if (heightDiff < -100 && newHeight < initialHeight * 0.75) {
+          keyboardOpen = true;
+          // Don't trigger viewport updates for keyboard changes
+          return;
+        }
+        
+        // Keyboard likely closed (viewport got bigger)
+        if (heightDiff > 100 && keyboardOpen) {
+          keyboardOpen = false;
+          // Don't trigger viewport updates for keyboard changes
+          return;
+        }
+      }
+      
+      // Only update for significant non-keyboard changes (more than 50px)
+      // or orientation changes (height differs significantly from initial)
+      const isOrientationChange = absoluteDiff > initialHeight * 0.3;
+      const isSignificantChange = absoluteDiff > 50;
+      
+      if (isOrientationChange || (isSignificantChange && !keyboardOpen)) {
         lastHeight = newHeight;
         globalState.viewportHeight = newHeight;
         
@@ -102,8 +131,13 @@ function setupListeners() {
           const vh = newHeight * 0.01;
           document.documentElement.style.setProperty('--vh', `${vh}px`);
         }
+        
+        // Update initial height after orientation change
+        if (isOrientationChange) {
+          initialHeight = newHeight;
+        }
       }
-    }, 150); // Increased debounce time
+    }, debounceDelay);
   };
   
   // Add resize listener with passive option for better performance
@@ -112,8 +146,10 @@ function setupListeners() {
   // Also listen for orientation changes on mobile
   if (globalState.isMobile) {
     window.addEventListener('orientationchange', () => {
+      // Reset keyboard state on orientation change
+      keyboardOpen = false;
       // Wait for orientation change to complete
-      setTimeout(handleResize, 100);
+      setTimeout(handleResize, 200);
     });
   }