From 80db45a522b5442cf696ab510c83e83187e10ee1 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Sun, 12 May 2024 12:33:41 +0700
Subject: [PATCH] fix: improve input checkbox input

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 components/layout/search/filters/filters-list.tsx | 6 ++++--
 lib/shopify/index.ts                              | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/layout/search/filters/filters-list.tsx b/components/layout/search/filters/filters-list.tsx
index 3f8653009..e12a0a22c 100644
--- a/components/layout/search/filters/filters-list.tsx
+++ b/components/layout/search/filters/filters-list.tsx
@@ -32,6 +32,8 @@ const Filters = ({ filters, defaultOpen = true }: { filters: Filter[]; defaultOp
     router.replace(createUrl(pathname, newSearchParams), { scroll: false });
   };
 
+  if (filters.length === 0) return null;
+
   return (
     <>
       <SelectedList filters={filters} />
@@ -62,12 +64,12 @@ const Filters = ({ filters, defaultOpen = true }: { filters: Filter[]; defaultOp
                     <input
                       id={valueId}
                       name={id}
-                      checked={searchParams.getAll(id).includes(String(value))}
+                      defaultChecked={searchParams.getAll(id).includes(String(value))}
                       type="checkbox"
                       value={String(value)}
                       className="h-4 w-4 rounded border-gray-300 text-secondary focus:ring-secondary disabled:cursor-not-allowed disabled:opacity-50"
                       disabled={count === 0}
-                      onChange={() => {}}
+                      key={searchParams.getAll(id).length}
                     />
                     <span>{`${label} (${count})`}</span>
                   </label>
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index bcc19b6c2..a85bd49b8 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -181,7 +181,6 @@ const reshapeCollections = (collections: ShopifyCollection[]) => {
 
 const reshapeFilters = (filters: ShopifyFilter[]): Filter[] => {
   const reshapedFilters = [];
-
   for (const filter of filters) {
     const values = filter.values
       .map((valueItem) => {