From 71d0e4ddd1f1c62e11efdb06225e0c34545a2452 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 1 Mar 2018 09:19:45 -0800
Subject: [PATCH] fix items rendered on top of other items

---
 .../PseudoVirtualListLazyItem.html            | 17 +++++++++++------
 .../virtualList/VirtualListLazyItem.html      | 19 ++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
index ede3b60..a11db7d 100644
--- a/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
+++ b/routes/_components/pseudoVirtualList/PseudoVirtualListLazyItem.html
@@ -1,5 +1,4 @@
-{{#await asyncProps}}
-{{then props}}
+{{#if props}}
   <PseudoVirtualListItem :component
                          :props
                          :key
@@ -11,15 +10,21 @@
                          :height
                          on:scrollToPosition
   />
-{{/await}}
+{{/if}}
 <script>
   import PseudoVirtualListItem from './PseudoVirtualListItem.html'
   export default {
+    oncreate() {
+      // TODO: there appears to be a bug in {{#await}} that means we have to do this manually.
+      // Some items may appear on top of other items because their offset is 0 and never updated.
+      let makeProps = this.get('makeProps')
+      let key = this.get('key')
+      if (makeProps) {
+        makeProps(key).then(props => this.set({props: props}))
+      }
+    },
     components: {
       PseudoVirtualListItem
-    },
-    computed: {
-      asyncProps: async (makeProps, key) => makeProps && makeProps(key)
     }
   }
 </script>
\ No newline at end of file
diff --git a/routes/_components/virtualList/VirtualListLazyItem.html b/routes/_components/virtualList/VirtualListLazyItem.html
index 7f44fde..f3bc0c8 100644
--- a/routes/_components/virtualList/VirtualListLazyItem.html
+++ b/routes/_components/virtualList/VirtualListLazyItem.html
@@ -1,20 +1,25 @@
-{{#await asyncProps}}
-{{then props}}
+{{#if props}}
   <VirtualListItem :component
                    :offset
                    :props
                    :key
                    :index
-                   />
-{{/await}}
+  />
+{{/if}}
 <script>
   import VirtualListItem from './VirtualListItem'
   export default {
+    oncreate() {
+      // TODO: there appears to be a bug in {{#await}} that means we have to do this manually.
+      // Some items may appear on top of other items because their offset is 0 and never updated.
+      let makeProps = this.get('makeProps')
+      let key = this.get('key')
+      if (makeProps) {
+        makeProps(key).then(props => this.set({props: props}))
+      }
+    },
     components: {
       VirtualListItem
-    },
-    computed: {
-      asyncProps: async (makeProps, key) => makeProps && makeProps(key)
     }
   }
 </script>
\ No newline at end of file