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
|
// 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>
|
||||||
|
|||||||
Reference in New Issue
Block a user