如何讓 shadcn/ui Select 元件 value 能夠接收空字串及其他型別
shadcn/ui 雖然主打隨時都能修改 source code 好像很彈性，但某些元件還是依賴其他第三方的 ui library，例如 Select 元件依賴@radix-ui/react-select，導致沒辦法輕易做到修改更底層的 source code。
而最近使用 shadcn/ui 也遇到蠻多坑的，其中一個讓我覺得最麻煩，一定得想辦法處理的就是 Select 元件 value 無法接收空字串及其他型別的問題，而限制空字串這還是新版@radix-ui/react-select 的 feature...
先說說不能空字串和只能字串會分別遇到什麼痛點好了
不能空字串
原本專案有個 filter search 功能，GET 能帶 status 參數，/api/orders?status="success"表示搜尋狀態為成功的訂單，/api/orders?status="error"表示搜尋狀態為失敗的訂單，
而/api/orders 表示搜尋所有狀態的訂單。
這時如果傳入物件有個 value 為""空字串的 key 給 axios params，我們會在 axios 的 paramsSerializer (參數序列化)或 interceptors (攔截器)過濾該物件的 key，你的 URL 還是/api/orders。
但如果今天限制不能只用空字串，你就必須自定義一個常量變數用來表示全部狀態，
例如"__ALL__"，然後去改變專案原本的 paramsSerializer (參數序列化)或 interceptors (攔截器)，不然你就只能在 submit 的時候必須先判斷是否為"__ALL__"，如果是的話就要先移除該 key 或改為空字串才能打 API，相當麻煩，況且如果遇到不是打 API，而是其他業務邏輯就是要空字串的情況怎辦?
只能字串
而只能使用字串會遇到打 POST API 或其他業務邏輯時，如果需要的參數為數字、布林值等，就必須在 submit 或處理之前將該字串手動判斷轉換為需要的型別，非常麻煩外，可讀性差又難以維護，在 react-hook-form 的 formValues 型別及驗證上也全是字串，根本沒有意義。
為了解決這問題，只能自己封裝一個 Select 元件了，而解決的思路其實也很簡單，因為不能動到底層的@radix-ui/react-select，所以我們還是傳字串value給SelectItem，只不過會先根據 value 的型別進行處理：
const valueToString = (val: any) => {
if (val === null) return "__null__"
if (val === undefined) {
console.error("option value cannot be undefined")
return "__undefined__"
}
if (val === Infinity) return "__Infinity__"
if (val === -Infinity) return "__-Infinity__"
if (Number.isNaN(val)) return "__NaN__"
if (typeof val === "symbol") return `__symbol__${val.description}`
return JSON.stringify(val)
}
然後在Select的 onValueChange 事件中，將拿到的字串value再轉換回原本的型別給上層的onChange使用，
const stringToValue = (str: string) => {
switch (str) {
case "__null__":
return null
case "__undefined__":
return undefined
case "__Infinity__":
return Infinity
case "__-Infinity__":
return -Infinity
case "__NaN__":
return NaN
default:
if (str.startsWith("__symbol__")) {
return Symbol(str.slice(10))
}
return JSON.parse(str)
}
}
const Select = forwardRef<HTMLButtonElement, SelectProps>(
({ options, placeholder, onChange, value }, ref) => {
const handleValueChange = (value: string) => {
if (onChange) {
onChange(stringToValue(value))
}
}
return (
<SelectUI
// Only show placeholder when value is initially undefined
value={value !== undefined ? valueToString(value) : undefined}
onValueChange={handleValueChange}
>
<SelectTrigger ref={ref} className="w-[180px]">
<SelectValue placeholder={placeholder} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{options.map((option) => (
<SelectItem
key={valueToString(option.value)}
value={valueToString(option.value)}
disabled={option.disabled}
>
{option.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</SelectUI>
)
}
)
這樣就大功告成了，同理Radio Group也是一樣的道理，畢竟很常遇到true和false要手動字串轉布林值的問題。
範例程式碼：