From 5023f7201bcde358e32fa139a3b36b3cd96bff90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20=C5=9Aliwa?= <lsliwaradioluz@gmail.com>
Date: Fri, 17 Jan 2025 16:31:56 +0100
Subject: [PATCH] refactor: internal state in SfSelect

---
 .../vue/components/SfSelect/SfSelect.vue      | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
index 44cf9367f8..4ffd2ea7ef 100644
--- a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
+++ b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type PropType, watch, ref } from 'vue';
+import { type PropType, ref, toRefs, computed } from 'vue';
 import { SfSelectSize, SfIconExpandMore, useFocusVisible, useDisclosure } from '@storefront-ui/vue';
 
 defineOptions({
@@ -40,12 +40,23 @@ const emit = defineEmits<{
   (event: 'update:modelValue', param: string): void;
 }>();
 
+const { modelValue, invalid } = toRefs(props);
 const { isOpen, close, open } = useDisclosure();
 const { isFocusVisible } = useFocusVisible();
 
-const internalValue = ref(props.modelValue);
-
-watch(internalValue, (value) => emit('update:modelValue', value));
+/*
+Internal state has been implemented due to native select's element
+value disappearing under certain circumstances. It's important to
+keep it here, or to always pass modelValue to the component.
+*/
+const internalState = ref<string>(props.modelValue);
+const selectModel = computed({
+  get: () => modelValue.value ||  internalState.value,
+  set: (value) => {
+    emit('update:modelValue', value);
+    internalState.value = value;
+  },
+});
 </script>
 
 <template>
@@ -60,7 +71,7 @@ watch(internalValue, (value) => emit('update:modelValue', value));
     data-testid="select"
   >
     <select
-      v-model="internalValue"
+      v-model="selectModel"
       :required="required"
       :disabled="disabled"
       :class="[