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

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, 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 = inject(registerNavigationLinkKey)!
+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"