Handle empty string option value

Author: buberdds

src/components/select/index.tsx

@@ -18,6 +18,10 @@ export type SelectProps<T = string> = {
   value?: T
 }
 
+// Avoid throwing an error if <Select.Item /> has an empty string value.
+// https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/select.tsx#L1277
+const EMPTY_VALUE_PLACEHOLDER = '__empty__'
+
 export const Select = <T extends string = string>({
   className,
   defaultValue,
@@ -28,24 +32,43 @@ export const Select = <T extends string = string>({
   placeholder = 'Select an option',
   value,
 }: SelectProps<T>) => {
+  const normalizeValue = (val: T | undefined) => {
+    if (val === '') return EMPTY_VALUE_PLACEHOLDER
+    return val
+  }
+
+  const denormalizeValue = (val: string): T => {
+    if (val === EMPTY_VALUE_PLACEHOLDER) return '' as T
+    return val as T
+  }
+
+  const handleValueChange = (newValue: string) => {
+    if (handleChange) {
+      handleChange(denormalizeValue(newValue))
+    }
+  }
+
   return (
     <div className={cn('space-y-2', className)}>
       {label && <Label>{label}</Label>}
       <BaseSelect
-        value={value as string}
-        onValueChange={handleChange as ((value: string) => void) | undefined}
-        defaultValue={defaultValue as string}
+        value={normalizeValue(value)}
+        onValueChange={handleValueChange}
+        defaultValue={normalizeValue(defaultValue)}
         disabled={disabled}
       >
         <SelectTrigger className="text-foreground font-medium data-[size=default]:h-10 w-full bg-background focus-visible:ring-ring/20">
           <SelectValue placeholder={placeholder} />
         </SelectTrigger>
         <SelectContent>
-          {options.map(option => (
-            <SelectItem key={String(option.value)} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
+          {options.map(option => {
+            const itemValue = option.value === '' ? EMPTY_VALUE_PLACEHOLDER : String(option.value)
+            return (
+              <SelectItem key={itemValue} value={itemValue}>
+                {option.label}
+              </SelectItem>
+            )
+          })}
         </SelectContent>
       </BaseSelect>
     </div>

src/stories/Select/Select.stories.tsx

@@ -18,6 +18,7 @@ const options = [
   { value: 'rofl_register', label: 'ROFL Register' },
   { value: 'rofl_remove', label: 'ROFL Remove' },
   { value: 'rofl_update', label: 'ROFL Update' },
+  { value: '', label: 'Unknown' },
 ]
 
 export const Default: Story = {