Merge pull request #3265 from vuestorefront/v2-release/patch-select

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

Author: Szymon-dziewonski

apps/docs/components/package.json

@@ -28,7 +28,7 @@
     "@nuxtjs/seo": "^2.0.0-rc.10",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@storefront-ui/typography": "^2.6.1",
-    "@storefront-ui/vue": "^2.6.4",
+    "@storefront-ui/vue": "^2.6.5",
     "@tailwindcss/typography": "^0.5.13",
     "@vueuse/integrations": "^10.11.0",
     "@vueuse/nuxt": "^10.11.0",

packages/sfui/frameworks/nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @storefront-ui/nuxt
 
+## 2.5.4
+
+### Patch Changes
+
+- Updated dependencies [[`f534058`](https://github.com/vuestorefront/storefront-ui/commit/f534058e4be50f1fb4f3394c6aab525f901b3ee4)]:
+  - @storefront-ui/vue@2.6.5
+
 ## 2.5.3
 
 ### Patch Changes

packages/sfui/frameworks/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storefront-ui/nuxt",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "homepage": "https://docs.storefrontui.io/v2/",
   "installConfig": {
     "hoistingLimits": "workspaces"

packages/sfui/frameworks/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @storefront-ui/react
 
+## 2.7.1
+
+### Patch Changes
+
+- [#3263](https://github.com/vuestorefront/storefront-ui/pull/3263) [`f534058`](https://github.com/vuestorefront/storefront-ui/commit/f534058e4be50f1fb4f3394c6aab525f901b3ee4) Thanks [@lsliwaradioluz](https://github.com/lsliwaradioluz)! - [FIXED] Fixed `<SfSelect />` placeholder not appearing initially when no value had been selected.
+
 ## 2.7.0
 
 ### Minor Changes

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', {

packages/sfui/frameworks/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storefront-ui/react",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

packages/sfui/frameworks/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @storefront-ui/vue
 
+## 2.6.5
+
+### Patch Changes
+
+- [#3263](https://github.com/vuestorefront/storefront-ui/pull/3263) [`f534058`](https://github.com/vuestorefront/storefront-ui/commit/f534058e4be50f1fb4f3394c6aab525f901b3ee4) Thanks [@lsliwaradioluz](https://github.com/lsliwaradioluz)! - [FIXED] Fixed `<SfSelect />` value not updated when no `v-model` is used on the component.
+
 ## 2.6.4
 
 ### Patch Changes

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],

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>,

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=""

packages/sfui/frameworks/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storefront-ui/vue",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

yarn.lock

@@ -4195,7 +4195,7 @@ __metadata:
     "@nuxtjs/seo": ^2.0.0-rc.10
     "@nuxtjs/tailwindcss": ^6.12.1
     "@storefront-ui/typography": ^2.6.1
-    "@storefront-ui/vue": ^2.6.4
+    "@storefront-ui/vue": ^2.6.5
     "@tailwindcss/typography": ^0.5.13
     "@types/node": ^20.12.7
     "@vueuse/integrations": ^10.11.0
@@ -4536,7 +4536,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storefront-ui/vue@^2.1.0, @storefront-ui/vue@^2.6.4, @storefront-ui/vue@workspace:*, @storefront-ui/vue@workspace:packages/sfui/frameworks/vue":
+"@storefront-ui/vue@^2.1.0, @storefront-ui/vue@^2.6.5, @storefront-ui/vue@workspace:*, @storefront-ui/vue@workspace:packages/sfui/frameworks/vue":
   version: 0.0.0-use.local
   resolution: "@storefront-ui/vue@workspace:packages/sfui/frameworks/vue"
   dependencies: