From 7e89fdf333b8830ed60917c756a8232cc8721d24 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 15 Aug 2024 01:49:35 +0100
Subject: [PATCH] fix(templates): improve search and fix key issues (#8549)

---
 packages/app/src/app/components/Create/CreateBox.tsx    | 9 +++++++--
 packages/app/src/app/components/Create/TemplateList.tsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/app/components/Create/CreateBox.tsx b/packages/app/src/app/components/Create/CreateBox.tsx
index 03cd1c99af5..bf3361d4335 100644
--- a/packages/app/src/app/components/Create/CreateBox.tsx
+++ b/packages/app/src/app/components/Create/CreateBox.tsx
@@ -82,8 +82,10 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
   if (searchQuery) {
     filteredTemplates = filteredTemplates.filter(template => {
       return (
-        template.title?.toLowerCase().includes(searchQuery) ||
-        template.tags.some(tag => tag.includes(searchQuery))
+        template.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        template.tags.some(tag =>
+          tag.toLowerCase().includes(searchQuery.toLowerCase())
+        )
       );
     });
   }
@@ -272,6 +274,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
                       <TemplateList
                         searchQuery={searchQuery}
                         title="Recently used"
+                        key="Recently used"
                         templates={recentlyUsedTemplates}
                         onSelectTemplate={selectTemplate}
                         onOpenTemplate={openTemplate}
@@ -279,6 +282,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
                     )}
                     <TemplateList
                       title="Popular"
+                      key="Popular"
                       searchQuery={searchQuery}
                       templates={featuredTemplates}
                       onSelectTemplate={selectTemplate}
@@ -287,6 +291,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
                   </>
                 ) : (
                   <TemplateList
+                    key={filters.join()}
                     searchQuery={searchQuery}
                     templates={filteredTemplates}
                     onSelectTemplate={selectTemplate}
diff --git a/packages/app/src/app/components/Create/TemplateList.tsx b/packages/app/src/app/components/Create/TemplateList.tsx
index eb2803e1cd7..0dcd747d95b 100644
--- a/packages/app/src/app/components/Create/TemplateList.tsx
+++ b/packages/app/src/app/components/Create/TemplateList.tsx
@@ -41,7 +41,7 @@ export const TemplateList = ({
         <TemplateGrid>
           {templates.map(template => (
             <TemplateCard
-              key={template.id + template.browserSandboxId}
+              key={template.id + template.browserSandboxId + template.title}
               template={template}
               onSelectTemplate={onSelectTemplate}
               onOpenTemplate={onOpenTemplate}