Fix delete button to properly work

kana · Aug 22, 2019 · 54ae169 · 54ae169
1 parent 846cb3f
commit 54ae169
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/components/LogPage.vue b/components/LogPage.vue
@@ -76,8 +76,7 @@ export default {
       this.deletableIndex = -1
     },
     onTouch (e) {
-      const i = parseInt(e.currentTarget.dataset.index, 10)
-      if (this.deletableIndex === i) {
+      if (this.deletableIndex !== -1) {
         this.deletableIndex = -1
         e.preventDefault()
       }

diff --git a/components/PageListItem.vue b/components/PageListItem.vue
@@ -10,7 +10,7 @@
     <div class="right">
       <font-awesome-icon icon="angle-right" size="lg" class="icon" />
     </div>
-    <div class="delete" @click="onClick">
+    <div class="delete" @touchstart="onTouchStart" @click="onClick">
       <font-awesome-icon icon="trash-alt" size="lg" class="icon" />
     </div>
   </link-list-item>
@@ -50,6 +50,13 @@ export default {
     onClick (e) {
       e.preventDefault()
       this.$emit('delete')
+    },
+    onTouchStart (e) {
+      // This stopPropagation is necessary to prioritize PageListItem#onClick
+      // over LogPage#onTouch.  The former deletes this item by tapping the
+      // delete button, while the latter cancels deletion by tapping another
+      // item or a non-delete-button portion of this item.
+      e.stopPropagation()
     }
   }
 }