Les libellés des liens avec un target="_blank" affichés sous certains conditions sont modifiés par le libellé d'un autre lien

[drogu02]

Voici un exemple pour reproduire

# yaml-language-server: $schema=https://formulaires.it.mtess.gouv.qc.ca/api/v1/SIS/ObtenirSchema/form
# debug: langue=auto, showAll=false
config:
  securite: 
    accesAnonyme: true
  title:
    fr: Admissibilité
  formulaireUnilingue: true
  enregistrement:
    actif: false
    afficherMessageIncitatif: false
  soumission:
    texteBoutonSoumettre:
      fr: Terminer
  confirmationTransmission:
    modaleCourrielConfirmation:
      actif: false   # Active ou non la fenêtre de courriel manquant lors de la soumission du formulaire

form:
  title:
    fr: "Admissibilité"
  sectionsGroup:
    # Section - Informations sur la demande
    - sectionGroup:
      sections:

        - section:
            fr: Ressources utilisées
          id: ressourcesPrevuesLoiSection
          components:
            - name: formationDispenseeEtablissementReconnu
              type: radio
              label:
                fr: La formation est-elle offerte par un établissement d'enseignement reconnu?
              options:
                Oui: 
                  fr: Oui
                Non: 
                  fr: Non

            - type: dynamic
              tag: div
              v-if: val('formationDispenseeEtablissementReconnu') == 'Oui'
              text:
                fr: |
                    <p><a href="https://www.quebec.ca/lien1" target="_blank">Libellé lien 1</a>.</p>


            - type: dynamic
              tag: div
              v-if: val('formationDispenseeEtablissementReconnu') == 'Non'
              text:
                fr: |
                    <p><a href="https://www.quebec.ca/lien1" target="_blank">Libellé lien 2</a>.</p>


    # Section - Finalisation de la demande
    - sectionGroup: 
        fr: Finalisation de la demande
      classes: icone clipboard-check
      sections:
        - section:
            fr: Révision
          id: revision
          cacherTexteExplicatifChampsObligatoires: true
          components:

            - type: dynamic
              tag: div
              v-if: val('EtatRevision') === 'initial'
              classes: texte-revision
              text: 
                fr: Vous devez cliquer sur le bouton « Valider » afin de vérifier que le formulaire est rempli correctement.

            - type: dynamic
              tag: div
              v-if: val('EtatRevision') === 'sans-erreur'
              classes: texte-revision
              text: 
                fr: Votre formulaire est validé. Vous pouvez cliquer sur le bouton « Terminer ».

AB#119073

[j0ber]

Bonjour,

Le problème

C'est très spécifique.
Le bloc html doit être exactement au même endroit et être remplacé par un v-if. Il faut aussi que le contrôle html parent soit identique (ex. un paragraphe sans classe ou attribut).

Le problème vient du mécanisme de patching html de vue js vs. l'utilitaire UTD qui ajoute le html pour les liens externes (icône de sortie de site et éléments pour l'accessibilité). Comme le code original du lien est modifié par UTD, vue lors du patching (ex. tu changes une valeur dans un champ et que ça provoque le retrait et l'ajout d'un bloc html ayant la même structure) vue fait du patching html afin d'optimiser le rendu. S'il détecte des contrôles identiques (ou qui on été modifiés en dehors de vue) il décide de ne pas "repaint" les contrôles en question. C'est exactement notre problème dans ton cas.

La solution temporaire

Pour le moment il y a quelques solutions de contournement possibles:

1. Utiliser un lien externe manuel au lieu d'un simple lien avec target="_blank" (UTD ne touchera pas au lien, donc le patching de vue va bien fonctionner)
2. Ajouter une classe ou un attribut différent sur le contrôle qui contient l'hyperlien. (Ex. ajouter une classe ou un attribut sur le paragraphe qui contient le lien)
3. Utiliser un contrôle différent pour contenir les hyperliens (ex. utiliser un span pour un lien, et une div pour l'autre)

Le plus simple à mon avis pour le moment est la solution 2.

Piste de solution informatique (à vérifier éventuellement)

La solution serait d'ajouter automatiquement un attribut key avec une valeur aléatoire unique. Cela forcera vue à bien faire son patching malgré le fait que UTD modifie un hyperlien externe.

Sur le tag en plus de la class et autre, il faudrait un un key="{{uneCleUniqueAleatoire}}"...