slim-select 3.1.0 → 3.1.1

package/src/slim-select/react/react.test.tsx

@@ -0,0 +1,498 @@
+import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest'
+import { render, cleanup, act, waitFor } from '@testing-library/react'
+import { useState, useEffect, useRef } from 'react'
+import SlimSelect, { Option } from '../index'
+import SlimSelectReact, { SlimSelectRef } from './react'
+
+describe('SlimSelect React Component', () => {
+  let consoleInfoSpy: any
+  let consoleWarnSpy: any
+
+  beforeEach(() => {
+    // Mock console methods
+    consoleInfoSpy = vi.spyOn(console, 'info').mockImplementation(() => {})
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    cleanup()
+    // Restore console methods
+    consoleInfoSpy.mockRestore()
+    consoleWarnSpy.mockRestore()
+  })
+
+  describe('Basic Rendering', () => {
+    test('renders a select element', () => {
+      const { container } = render(<SlimSelectReact />)
+      const select = container.querySelector('select')
+      expect(select).toBeTruthy()
+    })
+
+    test('renders with single select by default', () => {
+      const { container } = render(<SlimSelectReact />)
+      const select = container.querySelector('select')
+      expect(select?.hasAttribute('multiple')).toBe(false)
+    })
+
+    test('renders with multiple attribute when multiple prop is true', () => {
+      const { container } = render(<SlimSelectReact multiple />)
+      const select = container.querySelector('select')
+      expect(select?.hasAttribute('multiple')).toBe(true)
+    })
+  })
+
+  describe('Value and onChange binding', () => {
+    test('accepts initial value for single select', async () => {
+      const TestComponent = () => {
+        const [value, setValue] = useState('2')
+        const ref = useRef<SlimSelectRef>(null)
+
+        return (
+          <SlimSelectReact
+            ref={ref}
+            value={value}
+            onChange={(val) => setValue(val as string)}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' },
+              { value: '3', text: 'Option 3' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+
+      await waitFor(
+        () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            const selected = slimInstance.getSelected()
+            expect(selected[0]).toBe('2')
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+
+    test('accepts initial value for multiple select', async () => {
+      const TestComponent = () => {
+        const [value, setValue] = useState(['2', '3'])
+        return (
+          <SlimSelectReact
+            value={value}
+            onChange={(val) => setValue(val as string[])}
+            multiple
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' },
+              { value: '3', text: 'Option 3' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+
+      await waitFor(
+        () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            const selected = slimInstance.getSelected()
+            expect(selected).toEqual(['2', '3'])
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+
+    test('calls onChange when selection changes', async () => {
+      const onChangeMock = vi.fn()
+      const TestComponent = () => {
+        return (
+          <SlimSelectReact
+            value="1"
+            onChange={onChangeMock}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+
+      await waitFor(
+        async () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            await act(async () => {
+              slimInstance.setSelected('2')
+            })
+            await waitFor(
+              () => {
+                expect(onChangeMock).toHaveBeenCalledWith('2')
+              },
+              { timeout: 500 }
+            )
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+
+    test('updates selection when value prop changes', async () => {
+      const TestComponent = ({ initialValue }: { initialValue: string }) => {
+        const [value, setValue] = useState(initialValue)
+
+        useEffect(() => {
+          // Simulate parent updating value
+          const timer = setTimeout(() => {
+            act(() => {
+              setValue('2')
+            })
+          }, 100)
+          return () => clearTimeout(timer)
+        }, [])
+
+        return (
+          <SlimSelectReact
+            value={value}
+            onChange={(val) => setValue(val as string)}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent initialValue="1" />)
+
+      await waitFor(
+        () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            const selected = slimInstance.getSelected()
+            expect(selected[0]).toBe('2')
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+  })
+
+  describe('Data Prop', () => {
+    test('initializes with data prop', async () => {
+      const testData = [
+        { value: '1', text: 'Option 1' },
+        { value: '2', text: 'Option 2' },
+        { value: '3', text: 'Option 3' }
+      ]
+
+      const { container } = render(<SlimSelectReact data={testData} />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        const data = slimInstance.getData()
+        expect(data).toHaveLength(3)
+      }
+    })
+
+    test('updates data when data prop changes', async () => {
+      const TestComponent = () => {
+        const [data, setData] = useState([
+          { value: '1', text: 'Option 1' },
+          { value: '2', text: 'Option 2' }
+        ])
+
+        useEffect(() => {
+          const timer = setTimeout(() => {
+            act(() => {
+              setData([
+                { value: '3', text: 'Option 3' },
+                { value: '4', text: 'Option 4' },
+                { value: '5', text: 'Option 5' }
+              ])
+            })
+          }, 100)
+          return () => clearTimeout(timer)
+        }, [])
+
+        return <SlimSelectReact data={data} />
+      }
+
+      const { container } = render(<TestComponent />)
+
+      await waitFor(
+        () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            const data = slimInstance.getData()
+            expect(data).toHaveLength(3)
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+  })
+
+  describe('Settings Prop', () => {
+    test('applies settings prop', async () => {
+      const { container } = render(
+        <SlimSelectReact
+          data={[{ value: '1', text: 'Option 1' }]}
+          settings={{
+            showSearch: false,
+            placeholderText: 'Custom Placeholder'
+          }}
+        />
+      )
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        expect(slimInstance.settings.showSearch).toBe(false)
+        expect(slimInstance.settings.placeholderText).toBe('Custom Placeholder')
+      }
+    })
+  })
+
+  describe('Events Prop', () => {
+    test('calls afterChange event from events prop', async () => {
+      const afterChangeMock = vi.fn()
+
+      const TestComponent = () => {
+        return (
+          <SlimSelectReact
+            value="1"
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+            events={{
+              afterChange: afterChangeMock
+            }}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        slimInstance.setSelected('2')
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        expect(afterChangeMock).toHaveBeenCalled()
+      }
+    })
+
+    test('calls both custom afterChange and onChange', async () => {
+      const afterChangeMock = vi.fn()
+      const onChangeMock = vi.fn()
+
+      const TestComponent = () => {
+        return (
+          <SlimSelectReact
+            value="1"
+            onChange={onChangeMock}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+            events={{
+              afterChange: afterChangeMock
+            }}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        slimInstance.setSelected('2')
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        expect(afterChangeMock).toHaveBeenCalled()
+        expect(onChangeMock).toHaveBeenCalledWith('2')
+      }
+    })
+  })
+
+  describe('Empty and Invalid Values', () => {
+    test('handles empty string as value for single select', async () => {
+      const TestComponent = () => {
+        const [value, setValue] = useState('')
+        return (
+          <SlimSelectReact
+            value={value}
+            onChange={(val) => setValue(val as string)}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        // Verify placeholder exists in data
+        const data = slimInstance.getData()
+        const hasPlaceholder = (data as Option[]).some((opt: any) => opt.placeholder)
+        expect(hasPlaceholder).toBe(true)
+
+        // CRITICAL: Verify what's actually selected - should be empty string (placeholder)
+        const selectedValues = slimInstance.getSelected()
+        expect(selectedValues).toEqual([''])
+
+        // Verify no valid option is selected
+        const hasValidOptionSelected = selectedValues.some((val) => val !== '' && ['1', '2'].includes(val))
+        expect(hasValidOptionSelected).toBe(false)
+      }
+    })
+
+    test('shows placeholder when value does not exist in options for single select', async () => {
+      const TestComponent = () => {
+        const [value, setValue] = useState('banana')
+        return (
+          <SlimSelectReact
+            value={value}
+            onChange={(val) => setValue(val as string)}
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' },
+              { value: '3', text: 'Option 3' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await waitFor(
+        () => {
+          const select = container.querySelector('select')
+          const slimInstance = (select as any)?._slimSelect as SlimSelect
+          if (slimInstance) {
+            // Verify placeholder exists in data (with empty value, not 'banana')
+            const data = slimInstance.getData()
+            const hasPlaceholder = (data as Option[]).some((opt: any) => opt.placeholder)
+            expect(hasPlaceholder).toBe(true)
+
+            // CRITICAL: Check what's actually displayed in the SlimSelect UI
+            // SlimSelect renders a custom UI - check the .ss-single or .ss-placeholder element
+            const slimMain = container.querySelector('.ss-main') as HTMLElement
+            expect(slimMain).toBeDefined()
+
+            // Check what's in the .ss-values container
+            const ssValues = slimMain?.querySelector('.ss-values') as HTMLElement
+            expect(ssValues).toBeDefined()
+
+            // If placeholder is selected, it should show placeholder (no .ss-single element)
+            // If a real option is selected, it will show .ss-single with the option text
+            const singleValue = ssValues?.querySelector('.ss-single') as HTMLElement
+            const placeholderEl = ssValues?.querySelector('.ss-placeholder') as HTMLElement
+
+            // CRITICAL: If placeholder is correctly selected, we should NOT see .ss-single with "Option 1"
+            // Instead, we should either see placeholder OR empty (if placeholder text is empty)
+            if (singleValue) {
+              const displayedText = singleValue.textContent?.trim() || ''
+              // This should NOT be showing a real option
+              expect(displayedText).not.toBe('Option 1')
+              expect(displayedText).not.toBe('Option 2')
+              expect(displayedText).not.toBe('Option 3')
+
+              // If it's showing something, it might be the placeholder (empty text is OK)
+              // But we should verify the placeholder option is actually selected in the store
+            }
+
+            // Check the store to see what's actually selected
+            const selectedOptions = (slimInstance as any).store.getSelectedOptions()
+            const hasPlaceholderSelected = selectedOptions.some((opt: any) => opt.placeholder && opt.selected)
+            const hasValidOptionSelected = selectedOptions.some(
+              (opt: any) => opt.selected && !opt.placeholder && ['1', '2', '3'].includes(opt.value)
+            )
+
+            // The placeholder should be selected, not a valid option
+            expect(hasPlaceholderSelected).toBe(true)
+            expect(hasValidOptionSelected).toBe(false)
+          }
+        },
+        { timeout: 500 }
+      )
+    })
+
+    test('handles empty array as value for multiple select', async () => {
+      const TestComponent = () => {
+        const [value, setValue] = useState([] as string[])
+        return (
+          <SlimSelectReact
+            value={value}
+            onChange={(val) => setValue(val as string[])}
+            multiple
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      // Should not throw errors
+      expect(container.querySelector('select')).toBeTruthy()
+    })
+
+    test('updates onChange for multiple select when invalid values are provided', async () => {
+      const onChangeMock = vi.fn()
+
+      const TestComponent = () => {
+        return (
+          <SlimSelectReact
+            value={['banana', 'apple']}
+            onChange={onChangeMock}
+            multiple
+            data={[
+              { value: '1', text: 'Option 1' },
+              { value: '2', text: 'Option 2' },
+              { value: '3', text: 'Option 3' }
+            ]}
+          />
+        )
+      }
+
+      const { container } = render(<TestComponent />)
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const select = container.querySelector('select')
+      const slimInstance = (select as any)?._slimSelect as SlimSelect
+      if (slimInstance) {
+        // When user manually selects valid options, onChange should update
+        slimInstance.setSelected(['1', '2'])
+        await new Promise((resolve) => setTimeout(resolve, 100))
+
+        // Verify onChange has been called with the valid values
+        expect(onChangeMock).toHaveBeenCalledWith(['1', '2'])
+      }
+    })
+  })
+})

package/src/slim-select/react/react.tsx

@@ -22,12 +22,72 @@ const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
     const selectRef = useRef<HTMLSelectElement>(null)
     const slimSelectRef = useRef<SlimSelectCore | null>(null)
     const isInitialMount = useRef(true)
+    const currentValueRef = useRef<string | string[] | undefined>(value)
 
     // Expose SlimSelect instance to parent via ref
     useImperativeHandle(ref, () => ({
       slimSelect: slimSelectRef.current
     }))
 
+    // Helper to get clean value (similar to Vue's getCleanValue)
+    const getCleanValue = (val: string | string[] | undefined): string | string[] => {
+      // If its multiple and the value is a string, return an array with the string
+      if (typeof val === 'string') {
+        return multiple ? [val] : val
+      }
+
+      // If its not multiple and the value is an array, return the first item
+      if (Array.isArray(val)) {
+        return multiple ? val : val[0]
+      }
+
+      return multiple ? [] : ''
+    }
+
+    // Helper to sync value to SlimSelect (similar to Vue's syncModelValueToSlimSelect)
+    const syncValueToSlimSelect = (val: string | string[] | undefined, runAfterChange: boolean = false) => {
+      if (!slimSelectRef.current) return
+
+      // Only sync if value is explicitly set (not undefined)
+      // This prevents adding placeholders when value is not provided
+      if (val === undefined) {
+        return
+      }
+
+      const cleanValue = getCleanValue(val)
+      const data = slimSelectRef.current.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, 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 = slimSelectRef.current.getData()
+            const placeholderOption: Partial<Option> = {
+              value: '',
+              text: '',
+              placeholder: true
+            }
+            slimSelectRef.current.setData([placeholderOption].concat(currentData))
+          }
+        }
+      }
+
+      // Set the selected value (will select placeholder if it was just added)
+      // Match Vue component exactly - call setSelected with cleanValue directly
+      slimSelectRef.current.setSelected(cleanValue, runAfterChange)
+    }
+
     // Initialize SlimSelect
     useEffect(() => {
       if (!selectRef.current) return
@@ -53,10 +113,41 @@ const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
       config.events = {
         ...events,
         afterChange: (newVal) => {
-          const newValue = multiple ? newVal.map((option) => option.value) : (newVal[0]?.value ?? '')
+          if (!slimSelectRef.current) return
 
-          if (onChange) {
+          const newValue = multiple ? newVal.map((option) => option.value) : (newVal[0]?.value ?? '')
+          const slimData = slimSelectRef.current.getData()
+          const options = slimData.flatMap((item: Option | Optgroup) =>
+            'label' in item ? item.options : [item]
+          ) as Option[]
+
+          // Check if the current value exists in options
+          const currentValue = currentValueRef.current
+          const currentValueExists =
+            currentValue === undefined
+              ? false
+              : 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(newValue)
+            ? newValue.length > 0 && newValue.every((val) => options.some((opt) => opt.value === val))
+            : newValue !== '' && options.some((opt) => opt.value === newValue)
+
+          // Check if value actually changed (properly compare arrays)
+          const valueChanged =
+            Array.isArray(newValue) && Array.isArray(currentValue)
+              ? JSON.stringify(newValue.sort()) !== JSON.stringify(currentValue.sort())
+              : currentValue !== newValue
+
+          // Only call onChange if:
+          // 1. The value actually changed, AND
+          // 2. Either the current value exists in options, OR we're setting to a valid non-empty value
+          // This prevents clearing invalid values when we show placeholder
+          if (onChange && valueChanged && (currentValueExists || newValueIsValid)) {
             onChange(newValue)
+            currentValueRef.current = newValue
           }
 
           if (ogAfterChange) {
@@ -67,9 +158,9 @@ const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
 
       slimSelectRef.current = new SlimSelectCore(config)
 
-      // Set initial value if provided
+      // Sync initial value if provided
       if (value !== undefined) {
-        slimSelectRef.current.setSelected(value, false)
+        syncValueToSlimSelect(value, false)
       }
 
       return () => {
@@ -84,11 +175,13 @@ const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
     useEffect(() => {
       if (isInitialMount.current) {
         isInitialMount.current = false
+        currentValueRef.current = value
         return
       }
 
       if (slimSelectRef.current && value !== undefined) {
-        slimSelectRef.current.setSelected(value, false)
+        currentValueRef.current = value
+        syncValueToSlimSelect(value, false)
       }
     }, [value])
 
@@ -96,6 +189,10 @@ const SlimSelect = forwardRef<SlimSelectRef, SlimSelectProps>(
     useEffect(() => {
       if (slimSelectRef.current && data && !isInitialMount.current) {
         slimSelectRef.current.setData(data)
+        // Re-sync value after data changes
+        if (value !== undefined) {
+          syncValueToSlimSelect(value, false)
+        }
       }
     }, [data])