diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue index 30a7e04ad..4fa9268d4 100644 --- a/src/components/VnTable/VnTable.vue +++ b/src/components/VnTable/VnTable.vue @@ -394,7 +394,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) { :name="col.orderBy ?? col.name" :data-key="$attrs['data-key']" :search-url="searchUrl" - :vertical="true" + :vertical="false" /> { 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); @@ -259,6 +257,30 @@ async function onScroll({ to, direction, from, index }) { isLoading.value = false; } } + +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(); + } + } +}