UX: Adjust config of places search autocomplete component #465 photoprism#5080

Signed-off-by: Michael Mayer <michael@photoprism.app>

Author: lastzero

frontend/src/component/position/dialog.vue

@@ -43,6 +43,7 @@
           >
             <div>
               <v-autocomplete
+                ref="search"
                 v-model="selectedPlace"
                 :items="searchResults"
                 :loading="searchLoading"
@@ -54,9 +55,12 @@
                 item-title="formatted"
                 item-value="id"
                 return-object
+                auto-select-first
+                clear-on-select
                 clearable
                 autocomplete="off"
                 no-filter
+                menu-icon=""
                 :menu-props="{ maxHeight: 300 }"
                 @update:search="onSearchQueryChange"
                 @update:model-value="onPlaceSelected"
@@ -491,9 +495,7 @@ export default {
         this.currentLng = place.lng;
         this.updatePosition(place.lat, place.lng);
         this.fetchLocationInfo(place.lat, place.lng);
-
-        this.searchQuery = "";
-        this.searchResults = [];
+        this.clearSearch();
         this.searchLoading = false;
         if (this.searchTimeout) {
           clearTimeout(this.searchTimeout);

frontend/src/css/vuetify.css

@@ -233,13 +233,21 @@ div.v-dialog.v-dialog--fullscreen > div.v-card {
     justify-content: flex-end;
 }
 
-/* Lists */
+/* Lists and Menus */
 
 .v-menu > .v-overlay__content > .v-list:not(.v-list--nav) {
     padding: 0;
     opacity: 0.97;
 }
 
+.v-menu > .v-overlay__content > .v-list > .v-list-item.v-list-item--density-compact.v-list-item--one-line {
+    line-height: 36px;
+    min-height: 36px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-inline: 10px;
+}
+
 /* Progress */
 
 .v-progress-linear,
@@ -417,12 +425,8 @@ div.v-dialog.v-dialog--fullscreen > div.v-card {
     font-size: 0.75rem;
 }
 
-.v-menu > .v-overlay__content > .v-list > .v-list-item.v-list-item--density-compact.v-list-item--one-line {
-    line-height: 36px;
-    min-height: 36px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-inline: 10px;
+.v-input--readonly .v-autocomplete__menu-icon {
+    display: none;
 }
 
 .p-clipboard > .v-speed-dial__content > .v-btn.v-btn--icon {