Enregistrement d'élément avec délai

[Grafikart]

Décrire le bug

D'après ma compréhension la librairie utilise un dictionnaire pour retenir les élément et remplit ce dictionnaire à l'aide d'un mutation observer. Le problème est que dans certaines condition le dictionnaire n'a pas correctement enregistré l'élément quand on souhaite l'utiliser.

Les étapes pour reproduire le bug

1. Installer DSFR
2. Créer une modal (appendChild ou autre)
3. Essayer de l'ouvrir via le DSFR dans le même temps

Exemple avec React : https://stackblitz.com/edit/dsfr-bug-mutation?file=src%2FApp.jsx%3AL9

Comportement attendu

La modal devrait s'ouvrir, ne pas renvoyer d'erreur.

Configuration et système utilisé

• **Version du DSFR : ** 1.12.1
• **Appareil (mobile, tablette, desktop) : ** Tous
• **Système d’exploitation : ** Tous
• **Navigateur et version : ** Tous

Possible solution

Une solution serait, lorsque l'on fait dsfr(element) si l'élément n'est pas déjà dans le dictionnaire (mais existe dans le DOM), la librairie pourrait tenter de l'enregistrer à la volée avant d'exécuter la suite du code.

Enfin, je me pose une question concernant la performance de l'approche en cours (si j'ai bien compris la méthode actuelle) car utiliser une mutation observer pour observer le changement de tous les éléments de la page me semble un peu complexe (surtout sur une page complexe)

[keryanS]

Bonjour Grafikart,

C'est effectivement, un comportement qui n'est pas prévu pour le moment dans l'API du DSFR.
Nous travaillons à une v2 qui prévoira un lifecycle permettant une gestion du cycle de vie des composants, et une optimisation de la gestion des mutation observers.

Par ailleurs, la modale doit impérativement être liée à un bouton d'ouverture, pour récupérer le focus à la fermeture de la modale. C'est aussi un point que nous devont challenger puisque nous sommes conscient que l'association d'un bouton est parfois non désiré, mais cela assure une bonne intégration accessible.

L'ajout d'une modale sans le bouton d'ouverture ne fonctionnera donc pas. Même avec une initialisation antérieure au disclose.
La solution ici serait donc déja d'avoir un bouton d'ouverture, puis, pour ouvrir la modale sans passer par dsfr(modal.current).modal.disclose() il suffira d'ajouter l'attribut data-fr-opened=true sur le bouton. (exemples de boutons d'ouverture)

Merci pour ton retour,

Keryan,
Pour l'équipe du DSFR

Ps: Big fan 😁