fix: mark placeholder option as selected in react SfSelect (#3263)

* fix: mark placeholder option as selected in react SfSelect * chore: changeset * refactor: add internal value to vue SfSelect * chore: changeset for vue * refactor: remove redundant <script setup /> from vue components * refactor: internal state in SfSelect * refactor: remove disabled and selected attributes * chore: remove disabled in vue placeholder option * Revert "refactor: remove redundant <script setup /> from vue components" This reverts commit dafb778. * refactor: set inheritAttrs through defineOptions
vuestorefront · Jan 17, 2025 · f534058 · f534058
1 parent da07cce
commit f534058
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 20 deletions.
diff --git a/.changeset/shiny-camels-warn.md b/.changeset/shiny-camels-warn.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/vue': patch
+---
+
+[FIXED] Fixed `<SfSelect />` value not updated when no `v-model` is used on the component.
diff --git a/.changeset/strange-students-complain.md b/.changeset/strange-students-complain.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/react': patch
+---
+
+[FIXED] Fixed `<SfSelect />` placeholder not appearing initially when no value had been selected.
diff --git a/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx b/packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
@@ -64,7 +64,6 @@ export default function SfSelect(props: SfSelectProps) {
       >
         {placeholder && (
           <option
-            disabled
             hidden
             value=""
             className={classNames('bg-neutral-300 text-sm', {

diff --git a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
@@ -1,7 +1,4 @@
 <script lang="ts">
-export default {
-  inheritAttrs: false,
-};
 const getSizeClasses = {
   [SfInputSize.sm]: ' h-[32px]',
   [SfInputSize.base]: 'h-[40px]',
@@ -14,6 +11,10 @@ import type { PropType, ConcreteComponent } from 'vue';
 import { computed, ref, toRefs } from 'vue';
 import { SfInputSize, useFocusVisible } from '@storefront-ui/vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   modelValue: {
     type: [String, Number],

diff --git a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue b/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
@@ -1,8 +1,3 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
 <script lang="ts" setup>
 import { computed, toRefs, type PropType, type ConcreteComponent, reactive } from 'vue';
 import {
@@ -21,6 +16,10 @@ import {
   type ScrollableOptions,
 } from '@storefront-ui/vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   tag: {
     type: [String, Object] as PropType<string | ConcreteComponent>,

diff --git a/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue b/packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
@@ -1,12 +1,11 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
 <script lang="ts" setup>
-import { type PropType, computed } from 'vue';
+import { type PropType, ref, toRefs, computed } from 'vue';
 import { SfSelectSize, SfIconExpandMore, useFocusVisible, useDisclosure } from '@storefront-ui/vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = defineProps({
   size: {
     type: String as PropType<`${SfSelectSize}`>,
@@ -41,12 +40,22 @@ const emit = defineEmits<{
   (event: 'update:modelValue', param: string): void;
 }>();
 
+const { modelValue } = toRefs(props);
 const { isOpen, close, open } = useDisclosure();
 const { isFocusVisible } = useFocusVisible();
 
-const modelProxy = computed({
-  get: () => props.modelValue,
-  set: (value: string) => 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>(modelValue.value);
+const selectModel = computed({
+  get: () => modelValue.value ||  internalState.value,
+  set: (value) => {
+    emit('update:modelValue', value);
+    internalState.value = value;
+  },
 });
 </script>
 
@@ -62,8 +71,8 @@ const modelProxy = computed({
     data-testid="select"
   >
     <select
+      v-model="selectModel"
       :required="required"
-      v-model="modelProxy"
       :disabled="disabled"
       :class="[
         'appearance-none disabled:cursor-not-allowed cursor-pointer pl-4 pr-3.5 text-neutral-900 ring-inset focus:ring-primary-700 focus:ring-2 outline-none bg-transparent rounded-md ring-1 ring-neutral-300 hover:ring-primary-700 active:ring-2 active:ring-primary-700 disabled:bg-disabled-100 disabled:text-disabled-900 disabled:ring-disabled-200',
@@ -83,7 +92,6 @@ const modelProxy = computed({
     >
       <option
         v-if="placeholder"
-        disabled
         hidden
         class="text-sm bg-neutral-300"
         value=""