slim-select 3.1.0 → 3.1.1

package/src/slim-select/vue/vue.vue

@@ -59,32 +59,15 @@ export default defineComponent({
     config.events = {
       ...this.events,
       afterChange: (newVal: Option[]) => {
-        const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : ''
-
-        // Update v-model if value changed
-        if (this.value !== value) {
-          this.value = value
-        }
-
-        // Call the original afterChange callback if it exists
-        if (ogAfterChange) {
-          ogAfterChange(newVal)
-        }
+        this.handleAfterChange(newVal, ogAfterChange)
       }
     }
 
     // Initialize SlimSelect
     this.slim = new SlimSelect(config)
 
-    // Get SlimSelect selected values
-    let selected = this.$props.multiple ? this.slim.getSelected() : this.slim.getSelected()[0]
-
-    // Check if modelValue is the same as the value of the select
-    if (this.value !== selected) {
-      // If not, set the value of the select to the modelValue
-      // Don't trigger afterChange on initial sync
-      this.slim.setSelected(this.value, false)
-    }
+    // Sync initial modelValue to SlimSelect
+    this.syncModelValueToSlimSelect(false)
   },
   updated() {
     // After DOM updates (like slot content changes), sync selection from modelValue
@@ -95,7 +78,8 @@ export default defineComponent({
       const needsSync = JSON.stringify(currentSelected.sort()) !== JSON.stringify(modelValues.sort())
 
       if (needsSync) {
-        this.slim.setSelected(this.value, false)
+        // Use the same sync method to handle invalid values properly
+        this.syncModelValueToSlimSelect(false)
       }
     }
   },
@@ -108,10 +92,8 @@ export default defineComponent({
     modelValue: {
       handler: function (newVal: string | string[] | undefined) {
         if (!this.slim) return
-
-        // Set the value of the select to the newVal
-        // Don't trigger afterChange when programmatically updating from parent
-        this.slim.setSelected(this.getCleanValue(newVal), false)
+        // Sync modelValue to SlimSelect (don't trigger afterChange when programmatically updating from parent)
+        this.syncModelValueToSlimSelect(false)
       }
     },
     data: {
@@ -138,6 +120,43 @@ export default defineComponent({
     getSlimSelect() {
       return this.slim
     },
+    handleAfterChange(newVal: Option[], ogAfterChange?: (newVal: Option[]) => void): void {
+      if (!this.slim) return
+
+      const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : ''
+
+      // Check if the current v-model value exists in options
+      // If it doesn't exist, don't update v-model (preserve invalid value like regular HTML select)
+      const currentValue = this.getCleanValue(this.$props.modelValue)
+      const options = this.slim.store.getDataOptions()
+      const currentValueExists = Array.isArray(currentValue)
+        ? currentValue.length > 0 && currentValue.every((val) => options.some((opt) => opt.value === val))
+        : currentValue !== '' && options.some((opt) => opt.value === currentValue)
+
+      // Check if the new value is valid (exists in options)
+      const newValueIsValid = Array.isArray(value)
+        ? value.length > 0 && value.every((val) => options.some((opt) => opt.value === val))
+        : value !== '' && options.some((opt) => opt.value === value)
+
+      // Check if value actually changed (properly compare arrays)
+      const valueChanged =
+        Array.isArray(value) && Array.isArray(this.value)
+          ? JSON.stringify(value.sort()) !== JSON.stringify(this.value.sort())
+          : this.value !== value
+
+      // Only update v-model if:
+      // 1. The value actually changed, AND
+      // 2. Either the current v-model value exists in options, OR we're setting to a valid non-empty value
+      // This prevents clearing invalid v-model values when we show placeholder
+      if (valueChanged && (currentValueExists || newValueIsValid)) {
+        this.value = value
+      }
+
+      // Call the original afterChange callback if it exists
+      if (ogAfterChange) {
+        ogAfterChange(newVal)
+      }
+    },
     getCleanValue(val: string | string[] | undefined): string | string[] {
       const multi = this.$props.multiple
 
@@ -152,6 +171,47 @@ export default defineComponent({
       }
 
       return multi ? [] : ''
+    },
+    syncModelValueToSlimSelect(runAfterChange: boolean = false): void {
+      if (!this.slim) return
+
+      // Only sync if modelValue is explicitly set (not undefined)
+      // This prevents adding placeholders when modelValue is not provided
+      if (this.$props.modelValue === undefined) {
+        return
+      }
+
+      const cleanValue = this.getCleanValue(this.$props.modelValue)
+      const data = this.slim.getData()
+      // Extract options from data (flatten optgroups if any)
+      const options = data.flatMap((item: Option | Optgroup) => ('label' in item ? item.options : [item])) as Option[]
+
+      // Check if the value exists in options
+      const valueExists = Array.isArray(cleanValue)
+        ? cleanValue.length > 0 && cleanValue.every((val) => options.some((opt) => opt.value === val))
+        : cleanValue !== '' && options.some((opt) => opt.value === cleanValue)
+
+      // If value doesn't exist in options and it's not empty, add a placeholder option
+      if (!valueExists) {
+        // If its not multiple, add a placeholder option
+        if (!Array.isArray(cleanValue)) {
+          // For single select, check if placeholder already exists
+          const hasPlaceholder = options.some((opt) => opt.placeholder)
+          if (!hasPlaceholder) {
+            // Get current data and prepend placeholder option
+            const currentData = this.slim.getData()
+            const placeholderOption: Partial<Option> = {
+              value: '',
+              text: '',
+              placeholder: true
+            }
+            this.slim.setData([placeholderOption].concat(currentData))
+          }
+        }
+      }
+
+      // Set the selected value (will select placeholder if it was just added)
+      this.slim.setSelected(cleanValue, runAfterChange)
     }
   }
 })

package/vitest.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
+import react from '@vitejs/plugin-react'
 import path from 'path'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), react()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src')
@@ -12,7 +13,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
-    include: ['src/**/*.test.ts'],
+    include: ['src/**/*.test.{ts,tsx}'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],