From 408fcd488a1086e8de536d5737e04476dec2878c Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 8 Jun 2026 08:59:55 -0400
Subject: [PATCH] refactor(ui): unify confirm-dropdown Enter behavior via
 useAcceptOnEnter

Operator-flagged (again) on the tag-merge picker: Enter on the dropdown re-opens
it instead of accepting the selection. I'd already patched this twice (fandom
picker + fandom set dialog) with copy-pasted capture-phase handlers, so DRY it.

New composable useAcceptOnEnter(accept): tracks the menu state and, on a
capture-phase Enter, lets Vuetify pick when the menu is open but calls accept()
(and blocks the re-open) when it's closed. Applied to every confirm-style picker:
- TagsView merge-into picker (the reported one)
- AliasPickerDialog
- PostSeriesMenu add-to-existing
- FandomPicker + FandomSetDialog (refactored off their bespoke handlers)

One behavior, one place to change it.
---
 .../components/modal/AliasPickerDialog.vue    | 10 +++++-
 .../src/components/modal/FandomPicker.vue     | 21 +++--------
 .../src/components/modal/FandomSetDialog.vue  | 22 ++++--------
 .../src/components/posts/PostSeriesMenu.vue   |  9 +++++
 frontend/src/composables/useAcceptOnEnter.js  | 35 +++++++++++++++++++
 frontend/src/views/TagsView.vue               |  7 ++++
 6 files changed, 71 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/composables/useAcceptOnEnter.js

diff --git a/frontend/src/components/modal/AliasPickerDialog.vue b/frontend/src/components/modal/AliasPickerDialog.vue
index 37fae6f..0890529 100644
--- a/frontend/src/components/modal/AliasPickerDialog.vue
+++ b/frontend/src/components/modal/AliasPickerDialog.vue
@@ -8,6 +8,7 @@
       </p>
       <v-autocomplete
         v-model="selectedId"
+        v-model:menu="menuOpen"
         :items="results"
         :item-title="(t) => t.fandom_name ? `${t.name} — ${t.fandom_name}` : t.name"
         :item-value="(t) => t.id"
@@ -15,6 +16,7 @@
         label="Canonical tag"
         no-filter clearable density="compact"
         @update:search="onSearch"
+        @keydown.enter.capture="onEnter"
       />
     </v-card-text>
     <v-card-actions>
@@ -31,9 +33,10 @@
 <script setup>
 import { ref } from 'vue'
 import { useApi } from '../../composables/useApi.js'
+import { useAcceptOnEnter } from '../../composables/useAcceptOnEnter.js'
 
 const props = defineProps({ category: { type: String, required: true } })
-defineEmits(['confirm', 'cancel'])
+const emit = defineEmits(['confirm', 'cancel'])
 
 const api = useApi()
 const results = ref([])
@@ -41,6 +44,11 @@ const loading = ref(false)
 const selectedId = ref(null)
 let debounce = null
 
+// Enter on the closed dropdown confirms the selection instead of re-opening it.
+const { menuOpen, onEnter } = useAcceptOnEnter(() => {
+  if (selectedId.value != null) emit('confirm', selectedId.value)
+})
+
 function onSearch(q) {
   if (debounce) clearTimeout(debounce)
   debounce = setTimeout(async () => {
diff --git a/frontend/src/components/modal/FandomPicker.vue b/frontend/src/components/modal/FandomPicker.vue
index cb84aa2..47992fb 100644
--- a/frontend/src/components/modal/FandomPicker.vue
+++ b/frontend/src/components/modal/FandomPicker.vue
@@ -51,16 +51,19 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { useTagStore } from '../../stores/tags.js'
+import { useAcceptOnEnter } from '../../composables/useAcceptOnEnter.js'
 
 const emit = defineEmits(['confirm', 'cancel'])
 const store = useTagStore()
 
 const selectedId = ref(null)
 const newName = ref('')
-const menuOpen = ref(false)
 const fandomRef = ref(null)
 const newNameRef = ref(null)
 
+// Enter on the closed dropdown accepts the chosen fandom instead of re-opening it.
+const { menuOpen, onEnter: onSearchEnter } = useAcceptOnEnter(() => onConfirm())
+
 // Always refresh on open so the list reflects fandoms created elsewhere (#712).
 onMounted(() => store.loadFandoms())
 
@@ -92,22 +95,6 @@ function onConfirm () {
   if (f) emit('confirm', f)
 }
 
-// Enter on the search field — bound in the CAPTURE phase so this runs BEFORE
-// Vuetify's own input keydown handler (which opens the menu on Enter). When the
-// menu is open, let Vuetify pick the highlighted item (it sets selectedId +
-// closes the menu). When it's closed and a fandom is already chosen, accept it
-// and stop the event so Vuetify never (re)opens the menu — that re-open was the
-// bug: Enter popped the dropdown instead of submitting (operator-flagged
-// 2026-06-07).
-function onSearchEnter (e) {
-  if (menuOpen.value) return
-  if (selectedId.value != null) {
-    e.preventDefault()
-    e.stopPropagation()
-    onConfirm()
-  }
-}
-
 // Tab from the search field goes to the "new fandom" text field (operator-
 // specified). Shift+Tab keeps normal reverse traversal.
 function onSearchTab (e) {
diff --git a/frontend/src/components/modal/FandomSetDialog.vue b/frontend/src/components/modal/FandomSetDialog.vue
index 730bf2c..a290aa5 100644
--- a/frontend/src/components/modal/FandomSetDialog.vue
+++ b/frontend/src/components/modal/FandomSetDialog.vue
@@ -82,6 +82,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { useTagStore } from '../../stores/tags.js'
+import { useAcceptOnEnter } from '../../composables/useAcceptOnEnter.js'
 
 const props = defineProps({ tag: { type: Object, required: true } })
 const emit = defineEmits(['updated', 'cancel'])
@@ -93,10 +94,15 @@ const newName = ref('')
 const busy = ref(false)
 const error = ref(null)
 const collision = ref(null)
-const menuOpen = ref(false)
 const fandomRef = ref(null)
 const newNameRef = ref(null)
 
+// Enter on the closed dropdown Saves the changed fandom instead of re-opening it.
+const { menuOpen, onEnter: onSearchEnter } = useAcceptOnEnter(() => {
+  if (busy.value) return
+  if (selectedId.value !== (props.tag.fandom_id ?? null)) onSave()
+})
+
 // Always refresh on open so the list reflects fandoms created elsewhere (#712).
 onMounted(() => store.loadFandoms())
 
@@ -131,20 +137,6 @@ async function onCreate() {
   }
 }
 
-// Enter on the search field — bound in the CAPTURE phase so it runs BEFORE
-// Vuetify's own handler (which opens the menu on Enter). Menu open → let Vuetify
-// pick the highlighted item. Menu closed with a changed selection → Save and stop
-// the event so Vuetify never (re)opens the dropdown (the bug this fixes).
-function onSearchEnter(e) {
-  if (menuOpen.value) return
-  if (busy.value) return
-  if (selectedId.value !== (props.tag.fandom_id ?? null)) {
-    e.preventDefault()
-    e.stopPropagation()
-    onSave()
-  }
-}
-
 // Tab from the search field goes to the "new fandom" text field (operator-
 // specified). Shift+Tab keeps normal reverse traversal.
 function onSearchTab(e) {
diff --git a/frontend/src/components/posts/PostSeriesMenu.vue b/frontend/src/components/posts/PostSeriesMenu.vue
index fccdea0..2bc694f 100644
--- a/frontend/src/components/posts/PostSeriesMenu.vue
+++ b/frontend/src/components/posts/PostSeriesMenu.vue
@@ -32,11 +32,13 @@
           </p>
           <v-autocomplete
             v-model="picked"
+            v-model:menu="pickerMenuOpen"
             :items="hits"
             :item-title="(s) => s.name"
             :item-value="(s) => s.id"
             :loading="searching"
             label="Series" density="compact" autofocus clearable
+            @keydown.enter.capture="onEnter"
           />
         </v-card-text>
         <v-card-actions>
@@ -56,6 +58,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useApi } from '../../composables/useApi.js'
+import { useAcceptOnEnter } from '../../composables/useAcceptOnEnter.js'
 import { toast } from '../../utils/toast.js'
 
 const props = defineProps({ post: { type: Object, required: true } })
@@ -70,6 +73,12 @@ const picked = ref(null)
 const hits = ref([])
 const searching = ref(false)
 
+// Enter on the closed dropdown adds the chosen series instead of re-opening it.
+// (aliased — `menuOpen` above is the outer "Series ▾" v-menu's state.)
+const { menuOpen: pickerMenuOpen, onEnter } = useAcceptOnEnter(() => {
+  if (picked.value != null && !busy.value) onAddExisting()
+})
+
 async function onPromote() {
   menuOpen.value = false
   busy.value = true
diff --git a/frontend/src/composables/useAcceptOnEnter.js b/frontend/src/composables/useAcceptOnEnter.js
new file mode 100644
index 0000000..6a15890
--- /dev/null
+++ b/frontend/src/composables/useAcceptOnEnter.js
@@ -0,0 +1,35 @@
+import { ref } from 'vue'
+
+/**
+ * Unifies keyboard behavior for confirm-style `v-autocomplete` / `v-select`
+ * dropdowns — a single picker whose Enter should trigger the surrounding
+ * modal's primary action (Merge, Add, Save, Use…).
+ *
+ * The recurring bug (operator-flagged across the merge / fandom / series / alias
+ * dialogs): pressing Enter with the menu CLOSED re-opens the dropdown instead of
+ * accepting the chosen value, because Vuetify's own Enter handler opens the menu.
+ * We bind in the CAPTURE phase so this runs BEFORE Vuetify's handler:
+ *   - menu OPEN   → return; let Vuetify pick the highlighted item (it sets the
+ *                   value and closes the menu).
+ *   - menu CLOSED → preventDefault + stopPropagation so Vuetify can't re-open the
+ *                   menu, then call `accept()` — the modal's confirm. `accept`
+ *                   should itself no-op when nothing valid is selected.
+ *
+ * Usage:
+ *   const { menuOpen, onEnter } = useAcceptOnEnter(onConfirm)
+ *   <v-autocomplete v-model:menu="menuOpen" @keydown.enter.capture="onEnter" … />
+ *
+ * `menuOpen` is exposed so a component that programmatically focuses the field
+ * can force the menu shut (so the very next Enter accepts rather than being
+ * swallowed as a menu interaction).
+ */
+export function useAcceptOnEnter(accept) {
+  const menuOpen = ref(false)
+  function onEnter(e) {
+    if (menuOpen.value) return
+    e.preventDefault()
+    e.stopPropagation()
+    accept()
+  }
+  return { menuOpen, onEnter }
+}
diff --git a/frontend/src/views/TagsView.vue b/frontend/src/views/TagsView.vue
index 84f7e67..b2a75cc 100644
--- a/frontend/src/views/TagsView.vue
+++ b/frontend/src/views/TagsView.vue
@@ -55,11 +55,13 @@
           </p>
           <v-autocomplete
             v-model="mergeTargetId"
+            v-model:menu="mergeMenuOpen"
             :items="mergeHits" item-title="name" item-value="id"
             :loading="mergeLoading"
             density="compact" variant="outlined" hide-details
             placeholder="Search target tag…" no-filter
             @update:search="onMergeSearch"
+            @keydown.enter.capture="onMergeEnter"
           />
         </v-card-text>
         <v-card-actions>
@@ -107,6 +109,7 @@ import { useTagDirectoryStore } from '../stores/tagDirectory.js'
 import { useAdminStore } from '../stores/admin.js'
 import { useApi } from '../composables/useApi.js'
 import { useInfiniteScroll } from '../composables/useInfiniteScroll.js'
+import { useAcceptOnEnter } from '../composables/useAcceptOnEnter.js'
 import TagCard from '../components/discovery/TagCard.vue'
 import MergeConfirmDialog from '../components/discovery/MergeConfirmDialog.vue'
 import DestructiveConfirmModal from '../components/modal/DestructiveConfirmModal.vue'
@@ -181,6 +184,10 @@ const api = useApi()
 
 // Tag merge via dots-menu (separate from inline-rename collision flow above)
 const mergePickerOpen = ref(false)
+// Enter on the closed dropdown accepts the target instead of re-opening it.
+const { menuOpen: mergeMenuOpen, onEnter: onMergeEnter } = useAcceptOnEnter(
+  () => onMergeConfirm()
+)
 const mergeSource = ref(null)
 const mergeTargetId = ref(null)
 const mergeHits = ref([])