[pstanoev#177] fixed scroll position update - needs to happen in beforeUpdate

Author: Tom Adam

src/SimpleAutocomplete.svelte

@@ -1,6 +1,7 @@
 <script>
   import { flip } from "svelte/animate"
   import { fade } from "svelte/transition"
+  import {afterUpdate} from 'svelte'
 
   // the list of items  the user can select from
   export let items = []
@@ -203,6 +204,17 @@
   // other state
   let inputDelayTimeout
 
+  let setPositionOnNextUpdate = false;
+
+  // --- Lifecycle events ---
+
+  afterUpdate(() => {
+    if(setPositionOnNextUpdate) {
+      setScrollAwareListPosition()
+    }
+    setPositionOnNextUpdate = false
+  })
+
   // --- Functions ---
 
   function safeFunction(theFunction, argument) {
@@ -912,23 +924,11 @@
       return
     }
 
-    setScrollAwareListPosition()
+    setPositionOnNextUpdate = true
 
     opened = true
   }
 
-  function setScrollAwareListPosition() {
-    const { height: viewPortHeight } = window.visualViewport
-    const { bottom: inputButtom, height: inputHeight } = input.getBoundingClientRect()
-    const { height: listHeight } = list.getBoundingClientRect()
-
-    if (inputButtom + listHeight > viewPortHeight) {
-      list.style.top = `-${inputHeight + listHeight}px`
-    } else {
-      list.style.top = "0px"
-    }
-  }
-
   function close() {
     if (debug) {
       console.log("close")
@@ -1090,6 +1090,18 @@
     }
     selectedItem = newSelection
   }
+
+  function setScrollAwareListPosition() {
+    const { height: viewPortHeight } = window.visualViewport
+    const { bottom: inputButtom, height: inputHeight } = input.getBoundingClientRect()
+    const { height: listHeight } = list.getBoundingClientRect()
+
+    if (inputButtom + listHeight > viewPortHeight) {
+      list.style.top = `-${inputHeight + listHeight}px`
+    } else {
+      list.style.top = "0px"
+    }
+  }
 </script>
 
 <div