fix(nav): clean search field after navigation #2349

Approved-by: VANDERHAGHEN Luc <[email protected]>

Closes #2349

See merge request 24-heures-insa/overbookd-mono!3169

apps/web/layouts/navigation/DesktopSideNav.vue

@@ -16,7 +16,11 @@
       v-model:search-value="searchValue"
       :is-folded="isFolded"
     />
-    <SideNavPageList :search="searchValue" :is-folded="isFolded" />
+    <SideNavPageList
+      :search="searchValue"
+      :is-folded="isFolded"
+      @click="cleanSearchField"
+    />
     <SideNavHelpItemList
       :is-folded="isFolded"
       @ask-question="openAskQuestionDialog"
@@ -50,7 +54,8 @@ onMounted(() => navigationBadgeStore.fetchAll());
 const isDesktop = computed<boolean>(() => layoutStore.isDesktop);
 
 const isFolded = ref<boolean>(true);
-const searchValue = ref<string | undefined>(undefined);
+const searchValue = ref<string | undefined>();
+const cleanSearchField = () => (searchValue.value = "");
 
 const searchInput = ref<HTMLInputElement | null>(null);
 const unfocusOnSearch = () => searchInput.value?.blur();

apps/web/layouts/navigation/SideNavPageItem.vue

@@ -9,6 +9,7 @@
       'unfolded-item': !isFolded,
     }"
     link
+    @click="propagateClick"
   >
     <template #prepend>
       <v-badge
@@ -48,6 +49,9 @@ const isSelected = ({ to }: PageInSummary): boolean => {
   const currentPage = findPage(route.path);
   return currentPage?.to === to;
 };
+
+const emit = defineEmits(["click"]);
+const propagateClick = () => emit("click");
 </script>
 
 <style lang="scss" scoped>

apps/web/layouts/navigation/SideNavPageList.vue

@@ -10,6 +10,7 @@
       :key="page.to"
       :page="page"
       :is-folded="isFolded"
+      @click="propagateClick"
     />
     <v-divider
       v-show="favoritePages.length > 0 && nonFavoritePages.length > 0"
@@ -20,6 +21,7 @@
       :key="page.to"
       :page="page"
       :is-folded="isFolded"
+      @click="propagateClick"
     />
   </v-list>
 </template>
@@ -77,6 +79,9 @@ const favoritePages = computed<PageInSummary[]>(
 const nonFavoritePages = computed<PageInSummary[]>(
   () => PageFilter.from(filteredPages.value).nonFavorites,
 );
+
+const emit = defineEmits(["click"]);
+const propagateClick = () => emit("click");
 </script>
 
 <style lang="scss" scoped>

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overbookd/web",
-  "version": "3.3.74",
+  "version": "3.3.75",
   "description": "Application web pour le logiciel de gestion du festival des 24 heures de l'INSA",
   "author": "Club des 24 heures de l'INSA (https://www.24heures.org/)",
   "homepage": "https://gitlab.com/24-heures-insa/overbookd-mono",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overbookd",
-  "version": "3.24.1-rc.0",
+  "version": "3.24.1-rc.1",
   "main": "index.js",
   "keywords": [],
   "license": "Apache-2.0",