modal: auto focus face search (fix #484)

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

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>
+</style>

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">
+    <div v-if="detail">
-      <Tag :data="photo" :noNavigate="true" @open="clickFace" />
+      <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;