Bug sur le composant Header

[famzila]

Décrire le bug

On a constaté un bug au niveau du composant Header. En mode mobile, en ouvrant le bouton hamburger, et en cliquant sur un bouton, rien ne se passe, alors que en mode normal, l'événement se déclenche correctement.

Les étapes pour reproduire le bug

Exemple :

1. Aller à https://stackblitz.com/edit/stackblitz-starters-ttmefe?file=index.html (S'assurer de bien agrandir la taille pour ne pas voir le bouton hamburger)
2. Cliquer sur le bouton "label bouton"
3. L'événement click sur ce bouton s'execute bien et on voit apparaêtre l'alert
4. Réduire par la suite la taille de la page pour faire apparaitre le bouton hamburger
5. Cliquer à nouveau sur le bouton "label bouton"
6. Le problème apparaît, rien ne se passe, l'alert ne s'affiche pas.

Comportement attendu

L'attendu est que en mode mobile, le bouton en question affiche bien l'alert au clic, comme dans le mode normal.

Capture d’écran

Mode normal Mode mobile (rien ne se passe)

Configuration et système utilisé

• Version du DSFR : 1.11.2
• Appareil (mobile, tablette, desktop) : desktop
• Système d’exploitation : Windows
• Navigateur et version : Chrome 120.0.6099.200

[keryanS]

Bonjour,

Les liens d'accès rapide sont duppliqués en mobile pour être placés différemment dans le dom. L'ajout d'un eventListener sur un de ces éléments doit donc se faire à deux endroits, sur le bouton initial et le bouton dupliqué. Celui-ci porte le même id suffixé par : "-mobile".

https://stackblitz.com/edit/stackblitz-starters-crkgwz?file=index.html

L'autre solution, plutot qu'un eventListener, est de placer une fonction sur l'attribut onclick du bouton, celle-ci sera alors automatiquement duppliqué sur l'autre bouton.

Keryan, Pour l'équipe du DSFR