From e13090bb3bf4eca3aae47618d9bbc620407c69da Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 25 Oct 2024 07:01:58 +0200
Subject: [PATCH 1/2] feat: refs #8038 added new functionality in VnSelect and
 refactor styles

---
 src/components/VnTable/VnTable.vue |  2 +-
 src/components/common/VnSelect.vue | 23 +++++++++++++++++++++++
 src/css/app.scss                   |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index b9c6edf50..7a7c341a6 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -379,7 +379,7 @@ function handleScroll() {
                             :name="col.orderBy ?? col.name"
                             :data-key="$attrs['data-key']"
                             :search-url="searchUrl"
-                            :vertical="true"
+                            :vertical="false"
                         />
                     </div>
                     <slot
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b0aa648c1..86ca38468 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -230,6 +230,28 @@ function nullishToTrue(value) {
 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 
 defineExpose({ opts: myOptions });
+
+function handleKeyDown(event) {
+    if (event.key === 'Tab') {
+        event.preventDefault();
+
+        const inputValue = vnSelectRef.value?.inputValue;
+
+        if (inputValue) {
+            const matchingOption = myOptions.value.find(
+                (option) =>
+                    option[optionLabel.value].toLowerCase() === inputValue.toLowerCase()
+            );
+
+            if (matchingOption) {
+                emit('update:modelValue', matchingOption[optionValue.value]);
+            } else {
+                emit('update:modelValue', inputValue);
+            }
+            vnSelectRef.value?.hidePopup();
+        }
+    }
+}
 </script>
 
 <template>
@@ -250,6 +272,7 @@ defineExpose({ opts: myOptions });
         :option-value="optionValue"
         v-bind="$attrs"
         @filter="filterHandler"
+        @keydown="handleKeyDown"
         :emit-value="nullishToTrue($attrs['emit-value'])"
         :map-options="nullishToTrue($attrs['map-options'])"
         :use-input="nullishToTrue($attrs['use-input'])"
diff --git a/src/css/app.scss b/src/css/app.scss
index d4c76ad6b..63a9f5c46 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -241,7 +241,7 @@ input::-webkit-inner-spin-button {
     th,
     td {
         padding: 1px 10px 1px 10px;
-        max-width: 100px;
+        max-width: 130px;
         div span {
             overflow: hidden;
             white-space: nowrap;

From 98017df57d17239edaef1987d0e2e8397da77ce7 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 19 Nov 2024 12:25:15 +0100
Subject: [PATCH 2/2] fix: refs #8038 solve conflicts

---
 src/components/common/VnSelect.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index aeed07653..396b26f65 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -138,8 +138,6 @@ onMounted(() => {
     if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
 });
 
-defineExpose({ opts: myOptions });
-
 const arrayDataKey =
     $props.dataKey ?? ($props.url?.length > 0 ? $props.url : $attrs.name ?? $attrs.label);