smart-crop-ui/src/SELECT_EMPTY_STRING_FIXED.md

Select Empty String Error - Fixed ✅

Issue

Radix UI Select component doesn't allow <SelectItem value="" /> with empty strings because empty strings are reserved for clearing the selection.

Error message:

A <Select.Item /> must have a value prop that is not an empty string. 
This is because the Select value can be set to an empty string to clear 
the selection and show the placeholder.

Solution

Replace all empty string values with a special value 'none' and handle the conversion in the Select component.

Files Modified

• /components/field/SoilBaseData.tsx

Changes Made

1. Add Dialog - Main Device Selection (Line ~1133)

Before:

<Select value={newPoint.deviceId} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value })}>
  <SelectContent>
    <SelectItem value="">不绑定设备</SelectItem>

After:

<Select value={newPoint.deviceId || 'none'} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value === 'none' ? '' : value })}>
  <SelectContent>
    <SelectItem value="none">不绑定设备</SelectItem>

2. Add Dialog - Layer Device Selection (Line ~1239)

Before:

<Select 
  value={layer.deviceId || ''} 
  onValueChange={(value) => handleUpdateLayerDevice(layerIndex, value)}
>
  <SelectContent>
    <SelectItem value="">不绑定设备</SelectItem>

After:

<Select 
  value={layer.deviceId || 'none'} 
  onValueChange={(value) => handleUpdateLayerDevice(layerIndex, value === 'none' ? '' : value)}
>
  <SelectContent>
    <SelectItem value="none">不绑定设备</SelectItem>

3. Edit Dialog - Main Device Selection (Line ~1374)

Before:

<Select value={newPoint.deviceId} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value })}>
  <SelectContent>
    <SelectItem value="">不绑定设备</SelectItem>

After:

<Select value={newPoint.deviceId || 'none'} onValueChange={(value) => setNewPoint({ ...newPoint, deviceId: value === 'none' ? '' : value })}>
  <SelectContent>
    <SelectItem value="none">不绑定设备</SelectItem>

How It Works

1. Display Value: When the deviceId is empty, the Select shows 'none' as the selected value
2. User Selection: When user selects "不绑定设备", the value 'none' is passed to onValueChange
3. Value Conversion: The onValueChange handler converts 'none' back to '' (empty string)
4. Internal Storage: The component internally stores '' for "no device selected"

This approach maintains backward compatibility with the existing data structure while satisfying Radix UI's requirement that SelectItem values cannot be empty strings.

Testing

• ✅ Select "不绑定设备" option works
• ✅ Select a device works
• ✅ Switch between device and "不绑定设备" works
• ✅ No console errors
• ✅ Data saved correctly with empty string when no device selected

Status

RESOLVED - All Select components now use non-empty string values for SelectItem.