UX: Improve behavior of dropdowns in the Add to Album and Upload dialogs photoprism#5177 photoprism#5290

Author: omerdduran

frontend/src/component/photo/album/dialog.vue

@@ -18,6 +18,7 @@
           <v-combobox
             ref="input"
             v-model="selectedAlbums"
+            v-model:menu="albumsMenu"
             :disabled="loading"
             :loading="loading"
             hide-details
@@ -28,8 +29,10 @@
             :items="items"
             item-title="Title"
             item-value="UID"
-            :placeholder="$gettext('Select or create albums')"
             return-object
+            :placeholder="$gettext('Select or create albums')"
+            @update:menu="onAlbumsMenuUpdate"
+            @keydown.enter.stop="onAlbumsEnter"
           >
             <template #no-data>
               <v-list-item>
@@ -91,6 +94,8 @@ export default {
       albums: [],
       items: [],
       selectedAlbums: [],
+      albumsMenu: false,
+      suppressAlbumsMenuOpen: false,
       labels: {
         addToAlbum: this.$gettext("Add to album"),
         createAlbum: this.$gettext("Create album"),
@@ -213,11 +218,27 @@ export default {
         }
       });
     },
+    onAlbumsEnter() {
+      this.suppressAlbumsMenuOpen = true;
+      this.albumsMenu = false;
+      window.setTimeout(() => {
+        this.suppressAlbumsMenuOpen = false;
+      }, 250);
+    },
+    onAlbumsMenuUpdate(val) {
+      if (val && this.suppressAlbumsMenuOpen) {
+        this.albumsMenu = false;
+        return;
+      }
+      this.albumsMenu = val;
+    },
     reset() {
       this.loading = false;
       this.selectedAlbums = [];
       this.albums = [];
       this.items = [];
+      this.albumsMenu = false;
+      this.suppressAlbumsMenuOpen = false;
     },
     removeSelection(index) {
       this.selectedAlbums.splice(index, 1);

frontend/src/component/upload/dialog.vue

@@ -51,6 +51,8 @@
               <div class="form-controls">
                 <v-combobox
                   v-model="selectedAlbums"
+                  v-model:menu="albumsMenu"
+                  @update:menu="onAlbumsMenuUpdate"
                   :disabled="busy || loading || total > 0 || filesQuotaReached"
                   hide-details
                   chips
@@ -62,6 +64,7 @@
                   item-value="UID"
                   :placeholder="$gettext('Select or create albums')"
                   return-object
+                  @keydown.enter.stop="onAlbumsEnter"
                 >
                   <template #no-data>
                     <v-list-item>
@@ -156,6 +159,8 @@ export default {
       accept: this.$config.get("uploadAllow"),
       albums: [],
       selectedAlbums: [],
+      albumsMenu: false,
+      suppressAlbumsMenuOpen: false,
       selected: [],
       uploads: [],
       busy: false,
@@ -239,6 +244,20 @@ export default {
     onLoaded() {
       this.loading = false;
     },
+    onAlbumsEnter() {
+      this.suppressAlbumsMenuOpen = true;
+      this.albumsMenu = false;
+      window.setTimeout(() => {
+        this.suppressAlbumsMenuOpen = false;
+      }, 250);
+    },
+    onAlbumsMenuUpdate(val) {
+      if (val && this.suppressAlbumsMenuOpen) {
+        this.albumsMenu = false;
+        return;
+      }
+      this.albumsMenu = val;
+    },
     load(q) {
       if (this.loading) {
         return;
@@ -296,6 +315,8 @@ export default {
       this.remainingTime = -1;
       this.eta = "";
       this.token = "";
+      this.albumsMenu = false;
+      this.suppressAlbumsMenuOpen = false;
     },
     onUploadDialog() {
       this.$refs.upload.click();