- useKeyboard cleanup

front/components/ui-kit/theme/app-button-form-save.vue

@@ -3,6 +3,15 @@
     <slot name="left"></slot>
     <van-button round type="primary" native-type="submit" class="flex-1 shadow-depth2">
       {{ label }}
+
+      <!--    1000 debug attempts to get the save button to stick above the mobile Keyboard -->
+      <template v-if="false">
+        <div class="text-size-10">Keyboard = {{ isKeyboardVisible }}, Height = {{ keyboardHeight }}</div>
+        <div class="text-size-10">
+          H = {{ visualViewportHeight }}, page = {{ visualViewportPageTop }}, offset =
+          {{ visualViewportOffsetTop }}
+        </div>
+      </template>
     </van-button>
     <slot name="right" />
   </div>
@@ -21,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { isKeyboardVisible, keyboardHeight } = useKeyboard()
+const { isKeyboardVisible, keyboardHeight, visualViewportHeight, visualViewportOffsetTop, visualViewportPageTop } = useKeyboard()
 
 const style = computed(() => {
   const bottomWithoutKeyboard = `calc(env(safe-area-inset-bottom, 0px) + var(--van-tabbar-height) + ${props.bottom}px)`

front/composables/useKeyboard.js

@@ -1,22 +1,30 @@
 export function useKeyboard() {
-  const isKeyboardVisible = ref(false)
+  const visualViewportHeight = ref(0)
+  const visualViewportPageTop = ref(0)
+  const visualViewportOffsetTop = ref(0)
+
   const keyboardHeight = ref(0)
-  const originalHeight = ref(0)
+  const isKeyboardVisible = ref(false)
+
+  const onVisualViewportChange = async () => {
+    // await sleep(200)
+    visualViewportHeight.value = visualViewport.height
+    visualViewportPageTop.value = visualViewport.pageTop
+    visualViewportOffsetTop.value = visualViewport.offsetTop
 
-  const onResize = async () => {
-    // await sleep(1000)
     keyboardHeight.value = Math.max(window.innerHeight - visualViewport.height, 0)
     isKeyboardVisible.value = keyboardHeight.value > 0
   }
 
   onMounted(() => {
-    originalHeight.value = window.innerHeight
-    visualViewport.addEventListener('resize', onResize)
+    visualViewport.addEventListener('resize', onVisualViewportChange)
+    visualViewport.addEventListener('scroll', onVisualViewportChange)
   })
 
   onBeforeUnmount(() => {
-    visualViewport.removeEventListener('resize', onResize)
+    visualViewport.removeEventListener('resize', onVisualViewportChange)
+    visualViewport.removeEventListener('scroll', onVisualViewportChange)
   })
 
-  return { isKeyboardVisible, keyboardHeight }
+  return { visualViewportHeight, visualViewportPageTop, visualViewportOffsetTop, keyboardHeight, isKeyboardVisible }
 }

front/pages/transactions/[[id]].vue

@@ -30,8 +30,6 @@
           </div>
         </template>
 
-        Keyboard = {{ isKeyboardVisible }}, Height = {{ keyboardHeight }}
-
         <transaction-amount-field
           required
           v-model="amount"
@@ -141,7 +139,6 @@ import tag from '~/models/Tag'
 import { addDays, endOfMonth, startOfMonth } from 'date-fns'
 
 const refAmount = ref(null)
-const { isKeyboardVisible, keyboardHeight } = useKeyboard()
 
 // ------------------------------------