reset search input

Author: hatemhosny

src/livecodes/UI/selectors.ts

@@ -490,6 +490,9 @@ export const getStarterTemplatesList = /* @__PURE__ */ (templatesContainer: HTML
 export const getUserTemplatesScreen = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
   templatesContainer.querySelector('#templates-user .modal-screen') as HTMLElement;
 
+export const getTemplatesSearchInput = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
+  templatesContainer.querySelector('#templates-search-input') as HTMLInputElement;
+
 export const getBulkImportButton = /* @__PURE__ */ (listContainer: HTMLElement) =>
   listContainer.querySelector('#bulk-import-button') as HTMLElement;
 

src/livecodes/UI/templates.ts

@@ -1,6 +1,7 @@
 import { templatesScreen } from '../html';
 import type { EventsManager, Template } from '../models';
 import { debounce } from '../utils/utils';
+import { getTemplatesSearchInput } from './selectors';
 
 export const createTemplatesContainer = (eventsManager: EventsManager) => {
   const div = document.createElement('div');
@@ -59,7 +60,7 @@ export const noUserTemplates = () => `
 `;
 
 export const setupTemplatesSearch = (container: HTMLElement) => {
-  const input = container.querySelector('#templates-search-input');
+  const input = getTemplatesSearchInput(container);
   if (!input) return;
 
   const filterTemplates = (query: string) => {

src/livecodes/core.ts

@@ -3255,38 +3255,40 @@ const handleNew = () => {
     });
   };
 
-  let starterTemplatesCache: Template[];
   const createTemplatesUI = async () => {
     const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer);
+    if (!starterTemplatesList) return;
+    starterTemplatesList.innerHTML = '';
+    const searchInput = UI.getTemplatesSearchInput(templatesContainer);
+    if (searchInput) {
+      searchInput.value = '';
+    }
     const loadingText = starterTemplatesList?.firstElementChild;
-    if (!starterTemplatesCache) {
-      getTemplates()
-        .then((starterTemplates) => {
-          starterTemplatesCache = starterTemplates;
-          loadingText?.remove();
-          starterTemplates.forEach((template) => {
-            const link = createStarterTemplateLink(template, starterTemplatesList, baseUrl);
-            eventsManager.addEventListener(
-              link,
-              'click',
-              (event) => {
-                event.preventDefault();
-                loadStarterTemplate(template.name, /* checkSaved= */ false);
-              },
-              false,
-            );
-          });
-        })
-        .catch(() => {
-          loadingText?.remove();
-          notifications.error(
-            window.deps.translateString(
-              'core.error.failedToLoadTemplates',
-              'Failed loading starter templates',
-            ),
+    getTemplates()
+      .then((starterTemplates) => {
+        loadingText?.remove();
+        starterTemplates.forEach((template) => {
+          const link = createStarterTemplateLink(template, starterTemplatesList, baseUrl);
+          eventsManager.addEventListener(
+            link,
+            'click',
+            (event) => {
+              event.preventDefault();
+              loadStarterTemplate(template.name, /* checkSaved= */ false);
+            },
+            false,
           );
         });
-    }
+      })
+      .catch(() => {
+        loadingText?.remove();
+        notifications.error(
+          window.deps.translateString(
+            'core.error.failedToLoadTemplates',
+            'Failed loading starter templates',
+          ),
+        );
+      });
 
     loadUserTemplates();
     requestAnimationFrame(() => UI.getStarterTemplatesTab(templatesContainer)?.click());