From 217e6af6e1ebc80803c45b8f92f805b23f03221e Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Mon, 13 May 2024 21:38:24 -0700
Subject: [PATCH] Scroll hidden chips into view on select (#177)

Closes: #124

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: https://gitea.azgeorgis.net/ALVINN/ALVINN_f7/pulls/177
---
 src/pages/detect.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 699b3c3..8cb8b82 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -29,6 +29,7 @@
       <div class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
           :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
+          :id="(result.resultIndex == selectedChip) ? 'selected_chip' : ''"
           :text="result.label"
           media=" "
           :tooltip="result.confidence.toFixed(1)"
@@ -371,6 +372,10 @@
         imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
         this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true
+
+        this.$nextTick( () => {
+          document.getElementById('selected_chip').scrollIntoView({behavior: 'smooth', block: 'nearest'})
+        })
       },
       deleteChip ( iChip ) {
         f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {