From c77f334182472710d5444391569584c86dec696f Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Tue, 14 Mar 2023 12:04:21 -0700
Subject: [PATCH] modal: auto focus face search (fix #484)

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
---
 src/components/modal/FaceEditModal.vue |  5 +++--
 src/components/modal/FaceList.vue      | 16 ++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/modal/FaceEditModal.vue b/src/components/modal/FaceEditModal.vue
index 9b92e2d7..aaddbe4b 100644
--- a/src/components/modal/FaceEditModal.vue
+++ b/src/components/modal/FaceEditModal.vue
@@ -6,8 +6,9 @@
 
     <div class="fields">
       <NcTextField
-        :value.sync="name"
         class="field"
+        :autofocus="true"
+        :value.sync="name"
         :label="t('memories', 'Name')"
         :label-visible="false"
         :placeholder="t('memories', 'Name')"
@@ -118,4 +119,4 @@ export default defineComponent({
 .fields {
   margin-top: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/modal/FaceList.vue b/src/components/modal/FaceList.vue
index e9077341..3467ee3d 100644
--- a/src/components/modal/FaceList.vue
+++ b/src/components/modal/FaceList.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="outer" v-if="detail">
+  <div class="outer">
     <div class="search">
       <NcTextField
+        :autofocus="true"
         :value.sync="search"
         :label="t('memories', 'Search')"
         :placeholder="t('memories', 'Search')"
@@ -11,12 +12,14 @@
       </NcTextField>
     </div>
 
-    <div class="photo" v-for="photo of detail" :key="photo.fileid">
-      <Tag :data="photo" :noNavigate="true" @open="clickFace" />
+    <div v-if="detail">
+      <div class="photo" v-for="photo of detail" :key="photo.fileid">
+        <Tag :data="photo" :noNavigate="true" @open="clickFace" />
+      </div>
+    </div>
+    <div v-else>
+      {{ t("memories", "Loading …") }}
     </div>
-  </div>
-  <div v-else>
-    {{ t("memories", "Loading …") }}
   </div>
 </template>
 
@@ -99,6 +102,7 @@ export default defineComponent({
     },
 
     searchChanged() {
+      if (!this.detail) return;
       this.detail = this.search
         ? this.fuse.search(this.search).map((r) => r.item)
         : this.fullDetail;