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