fix: SelectItem empty value error in Coupons list

Fixed blank white page caused by SelectItem validation error

Problem:
- SelectItem cannot have empty string as value
- Radix UI Select requires non-empty values
- Empty value for 'All types' filter caused component crash

Solution:
- Changed empty string to 'all' value for All types option
- Updated Select to use undefined when no filter selected
- Updated query logic to ignore 'all' value (treat as no filter)
- Updated hasActiveFilters check to exclude 'all' value

Changes:
- Select value: discountType || undefined
- Select onChange: value || '' (convert back to empty string)
- Query filter: discountType !== 'all' ? discountType : undefined
- Active filters: discountType && discountType !== 'all'

Result:
- No more SelectItem validation errors
- Page loads correctly
- Filter works as expected
- Clear filters button shows/hides correctly
This commit is contained in:
dwindown
2025-11-20 14:54:25 +07:00
parent 36f8b2650b
commit 7bbc098a8f

View File

@@ -28,7 +28,12 @@ export default function CouponsIndex() {
// Fetch coupons // Fetch coupons
const { data, isLoading, isError, error, refetch } = useQuery({ const { data, isLoading, isError, error, refetch } = useQuery({
queryKey: ['coupons', page, search, discountType], queryKey: ['coupons', page, search, discountType],
queryFn: () => CouponsApi.list({ page, per_page: 20, search, discount_type: discountType }), queryFn: () => CouponsApi.list({
page,
per_page: 20,
search,
discount_type: discountType && discountType !== 'all' ? discountType : undefined
}),
}); });
// Delete mutation // Delete mutation
@@ -102,7 +107,7 @@ export default function CouponsIndex() {
} }
const coupons = data?.coupons || []; const coupons = data?.coupons || [];
const hasActiveFilters = search || discountType; const hasActiveFilters = search || (discountType && discountType !== 'all');
return ( return (
<div className="space-y-4"> <div className="space-y-4">
@@ -136,12 +141,12 @@ export default function CouponsIndex() {
{/* Right: Filters */} {/* Right: Filters */}
<div className="flex gap-3 flex-wrap items-center"> <div className="flex gap-3 flex-wrap items-center">
{/* Discount Type Filter */} {/* Discount Type Filter */}
<Select value={discountType} onValueChange={setDiscountType}> <Select value={discountType || undefined} onValueChange={(value) => setDiscountType(value || '')}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-[180px]">
<SelectValue placeholder={__('All types')} /> <SelectValue placeholder={__('All types')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="">{__('All types')}</SelectItem> <SelectItem value="all">{__('All types')}</SelectItem>
<SelectItem value="percent">{__('Percentage')}</SelectItem> <SelectItem value="percent">{__('Percentage')}</SelectItem>
<SelectItem value="fixed_cart">{__('Fixed Cart')}</SelectItem> <SelectItem value="fixed_cart">{__('Fixed Cart')}</SelectItem>
<SelectItem value="fixed_product">{__('Fixed Product')}</SelectItem> <SelectItem value="fixed_product">{__('Fixed Product')}</SelectItem>