Les boutons tooltip ne devraient pas soumettre le formulaire

[thibault]

En utilisant un composant « infobulle » au sein d'un formulaire, j'ai constaté que l'activation du tooltip avait pour effet secondaire de déclencher la soumission.

Documentation associée

J'ai suivi la documentation du composant « infobulle ».

<button class="fr-btn--tooltip fr-btn" aria-describedby="tooltip-project-description">
    Information contextuelle
</button>
<span class="fr-tooltip fr-placement" id="tooltip-project-description" role="tooltip" aria-hidden="true">
    Merci de ne fournir que les informations utiles à la compréhension de la demande d’avis.
</span>

La seule différence est que ce composant se trouve au sein d'une balise form.

Suggestion

On peut éviter ce comportement problématique en ajoutant un attribut type="button" au bouton.

<button type="button" class="fr-btn--tooltip fr-btn" aria-describedby="tooltip-project-description">
    Information contextuelle
</button>
<span class="fr-tooltip fr-placement" id="tooltip-project-description" role="tooltip" aria-hidden="true">
    Merci de ne fournir que les informations utiles à la compréhension de la demande d’avis.
</span>

Il me semble que la doc pourrait être mise à jour en ce sens, car un bouton tooltip ne devrait pas avoir d'autres effets par défaut.

Sources

D'après la doc MDN :

type=button. Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

[keryanS]

Bonjour,

Merci pour ce retour, j'ai créé un ticket et l'ai ajouté dans le backlog :)