fix(DsfrHeader): 🐛 ferme la modale en mobile au clic sur un lien du menu

Author: laruiss

demo-app/main.js

@@ -1,5 +1,4 @@
 import VueDsfr from '@/index'
-import { Icon } from '@iconify/vue'
 
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -14,7 +13,6 @@ import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
 
 createApp(App)
   .use(router)
-  .component('Icon', Icon)
   .use(VueDsfr)
   .mount('#app')
 

demo-app/views/AppHome.vue

@@ -70,7 +70,7 @@ const onClick = () => {
   }, 2000)
 }
 
-const expandedId = ref('')
+const activeAccordion = ref(-1)
 </script>
 
 <template>
@@ -111,19 +111,20 @@ const expandedId = ref('')
   </h2>
 
   <div>
-    <DsfrAccordion
-      id="accordion-1"
-      style="position: relative;"
-      title="Accordéon avec infobulle"
-      :expanded-id="expandedId"
-      @expand="expandedId = $event"
+    <DsfrAccordionsGroup
+      v-model="activeAccordion"
     >
-      Test infobulle dans accordéon
-      <DsfrTooltip
-
-        content="Texte de l’info-bulle qui apparaît au survol"
-      />
-    </DsfrAccordion>
+      <DsfrAccordion
+        style="position: relative;"
+        title="Accordéon avec infobulle"
+      >
+        Test infobulle dans accordéon
+        <DsfrTooltip
+
+          content="Texte de l’info-bulle qui apparaît au survol"
+        />
+      </DsfrAccordion>
+    </DsfrAccordionsGroup>
   </div>
 
   <div class="flex justify-between w-full relative">

src/components/DsfrAccordion/DsfrAccordionsGroup.vue

@@ -4,7 +4,7 @@ import { computed, onUnmounted, provide, ref, type Ref, watch } from 'vue'
 import { registerTabKey } from './injection-key'
 
 const props = withDefaults(defineProps<{
-  modelValue: number
+  modelValue?: number
 }>(), {
   modelValue: -1,
 })

src/components/DsfrHeader/DsfrHeader.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, toRef, useSlots } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, toRef, useSlots } from 'vue'
 
 import DsfrLanguageSelector, { type DsfrLanguageSelectorElement } from '../DsfrLanguageSelector/DsfrLanguageSelector.vue'
 import DsfrLogo from '../DsfrLogo/DsfrLogo.vue'
 import DsfrSearchBar from '../DsfrSearchBar/DsfrSearchBar.vue'
 import DsfrHeaderMenuLinks from './DsfrHeaderMenuLinks.vue'
+import { registerNavigationLinkKey } from './injection-key'
 
 import type { DsfrHeaderProps } from './DsfrHeader.types'
 
@@ -79,6 +80,9 @@ const onQuickLinkClick = hideModal
 const slots = useSlots()
 const isWithSlotOperator = computed(() => Boolean(slots.operator?.().length) || !!props.operatorImgSrc)
 const isWithSlotNav = computed(() => Boolean(slots.mainnav))
+provide(registerNavigationLinkKey, () => {
+  return hideModal
+})
 </script>
 
 <template>

src/components/DsfrHeader/injection-key.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey } from 'vue'
+
+type RegisterNavigationLink = () => () => void
+
+export const registerNavigationLinkKey: InjectionKey<RegisterNavigationLink> = Symbol('header')

src/components/DsfrNavigation/DsfrNavigationMenuLink.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, hasInjectionContext, inject } from 'vue'
 import { getRandomId } from '../../utils/random-utils'
 
-import VIcon from '../VIcon/VIcon.vue'
+import { registerNavigationLinkKey } from '../DsfrHeader/injection-key'
 
+import VIcon from '../VIcon/VIcon.vue'
 import type { DsfrNavigationMenuLinkProps } from './DsfrNavigation.types'
 
 export type { DsfrNavigationMenuLinkProps }
@@ -27,6 +28,9 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
       ? { scale: defaultScale, name: props.icon }
       : { scale: defaultScale, ...((props.icon as Record<string, string>) || {}) },
 )
+
+const useHeader = hasInjectionContext() ? inject(registerNavigationLinkKey)! : undefined
+const closeModal = useHeader?.() ?? (() => {})
 </script>
 
 <template>
@@ -35,8 +39,7 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
     class="fr-nav__link"
     data-testid="nav-external-link"
     :href="(to as string)"
-    @click="$emit('toggleId', id)"
-    @click.stop="onClick($event)"
+    @click="$emit('toggleId', id); onClick($event)"
   >
     {{ text }}
   </a>
@@ -48,8 +51,7 @@ const iconProps = computed(() => (dsfrIcon.value || !props.icon)
     :class="{
       [String(icon)]: dsfrIcon,
     }"
-    @click="$emit('toggleId', id)"
-    @click.stop="onClick($event)"
+    @click="closeModal(); $emit('toggleId', id); onClick?.($event)"
   >
     <VIcon
       v-if="icon && iconProps"