Lorsqu’un composant <Tooltip /> avec kind="hover" est activé par un clic, l’infobulle reste affichée après un clic à l’extérieur.
Le problème ne se produit pas avec kind="click" : dans ce cas, le clic extérieur ferme correctement l’infobulle.
Exemple minimal
<Tooltip kind="hover" title="Coordonnées du référent">
<div>Jean Dupont</div>
</Tooltip>
Le problème est également présent avec le déclencheur par défaut :
<Tooltip kind="hover" title="Information contextuelle" />
Étapes de reproduction
- Afficher un tooltip avec kind="hover".
- Cliquer sur son déclencheur.
- Cliquer en dehors du déclencheur et de l’infobulle.
Le tooltip reste affiché après le clic extérieur.
Avec kind="click", le tooltip se ferme correctement dans les mêmes conditions.
Reproduction dans Storybook
Le problème est également reproductible directement dans le Storybook de react-dsfr, sur la story par défaut du composant Tooltip :
- Cliquer sur un tooltip configuré avec kind="hover".
- Cliquer en dehors de son déclencheur.
- Constater que le tooltip reste affiché.
La variante utilisant kind="click" se ferme correctement lors d’un clic extérieur.
Comportement attendu
Un tooltip kind="hover" ouvert à la suite d’un clic doit pouvoir être fermé :
- en cliquant en dehors du déclencheur ;
- lorsque le focus quitte le déclencheur ;
- avec la touche Échap.
Son comportement au survol doit rester inchangé.
Environnement
- @codegouvfr/react-dsfr : 1.32.4
- navigateur : Chromium
- problème initialement constaté dans Mon Espace Collectivité
Piste de correction
Après avoir regardé le comportement du composant, le clic semble être géré directement par le JavaScript du DSFR, qui ouvre actuellement le tooltip quel que soit son type.
Comme kind="click" utilise déjà la classe .fr-btn--tooltip, on pourrait s’appuyer sur cette distinction pour ne réagir au clic que dans ce cas. Les tooltips kind="hover" continueraient ainsi de fonctionner au survol et au focus, sans rester ouverts après un clic.
Je ne sais pas encore si cette correction doit être faite dans react-dsfr ou directement dans le DSFR natif, donc je préfère valider l’approche avec vous avant de proposer une PR.
Lorsqu’un composant
<Tooltip />aveckind="hover"est activé par un clic, l’infobulle reste affichée après un clic à l’extérieur.Le problème ne se produit pas avec
kind="click": dans ce cas, le clic extérieur ferme correctement l’infobulle.Exemple minimal
Le problème est également présent avec le déclencheur par défaut :
Étapes de reproduction
Le tooltip reste affiché après le clic extérieur.
Avec
kind="click", le tooltip se ferme correctement dans les mêmes conditions.Reproduction dans Storybook
Le problème est également reproductible directement dans le Storybook de react-dsfr, sur la story par défaut du composant Tooltip :
La variante utilisant kind="click" se ferme correctement lors d’un clic extérieur.
Comportement attendu
Un tooltip
kind="hover"ouvert à la suite d’un clic doit pouvoir être fermé :Son comportement au survol doit rester inchangé.
Environnement
Piste de correction
Après avoir regardé le comportement du composant, le clic semble être géré directement par le JavaScript du DSFR, qui ouvre actuellement le tooltip quel que soit son type.
Comme
kind="click"utilise déjà la classe.fr-btn--tooltip, on pourrait s’appuyer sur cette distinction pour ne réagir au clic que dans ce cas. Les tooltipskind="hover"continueraient ainsi de fonctionner au survol et au focus, sans rester ouverts après un clic.Je ne sais pas encore si cette correction doit être faite dans
react-dsfrou directement dans le DSFR natif, donc je préfère valider l’approche avec vous avant de proposer une PR.