From f509616f86ffb0fbd607c2b0c5af36ab6758692e Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 23 Apr 2025 14:59:41 +0200
Subject: [PATCH] fix(VnSelect): refs #8224 improve focus handling and update
 selected item template

---
 src/components/common/VnSelect.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 25e46c815..630ad3aaf 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -397,13 +397,15 @@ function getOptionLabel(property) {
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
         :data-url="url"
-        @focus="
+        @blur="hasFocus = false"
+        @update:model-value="() => vnSelectRef.blur()"
+        @popup-show="
             async () => {
                 hasFocus = true;
+                await $nextTick();
+                vnSelectRef?.$el?.querySelector('input')?.focus();
             }
         "
-        @blur="() => (hasFocus = false)"
-        @update:model-value="vnSelectRef.blur()"
     >
         <template #append>
             <QIcon
@@ -412,7 +414,6 @@ function getOptionLabel(property) {
                 @click="
                     () => {
                         value = null;
-                        vnSelectRef.blur();
                         emit('remove');
                     }
                 "
@@ -454,9 +455,15 @@ function getOptionLabel(property) {
                 </QItemSection>
             </QItem>
         </template>
-        <template #selected-item="scope" v-if="valueIsObject">
-            <span class="nowrap" @click="vnSelectRef.showPopup()">
-                <s class="nowrap" v-if="scope?.opt.neq" v-text="getOptionLabel('neq')" />
+        <template #selected v-if="valueIsObject">
+            <span class="nowrap">
+                <s
+                    class="nowrap"
+                    v-if="modelValue?.neq"
+                    v-text="getOptionLabel('neq')"
+                    :title="getOptionLabel('neq')"
+                />
+                <span v-else>{{ JSON.stringify(modelValue) }}</span>
             </span>
         </template>
     </QSelect>