Bug maj programmatique de Range

[totakoko]

Hello,

On utilise le Range (curseur) dans un formulaire et on a besoin de réinitialiser les valeurs. Donc de bouger programmatiquement (sans interaction utilisateur) la valeur du range.
Malhreureusement, visuellement, ça se comporte pas comme on voudrait.

En regardant un peu, il apparaitrait que la fonction native DSFR Range.update n'est pas appelée, et donc la mise à jour de la variable css progress-right (tout en fait), n'est pas faite.
https://github.com/GouvernementFR/dsfr/blob/fe9d66b4ccaa7c3a3c0cb07eca69ddd6787965c4/src/component/range/script/range/range.js#L160

Est-ce que c'est côté react-dsfr ou dsfr qu'il faut gérer ça ?

[enguerranws]

Est-ce que tu aurais un exemple reproductible de ce comportement ?
Sur storybook, progressRight est bien mise à jour : https://components.react-dsfr.codegouv.studio/?path=/docs/components-range--default

[totakoko]

Sur storybook, la valeur n'est jamais contrôlée (ou j'ai loupé qqch).
Tu sais s'il existe un environnement stackblitz ou autre avec react-dsfr justement pour tester et montrer rapidement des choses en ligne ?

Sinon voici le code :

import Range from '@codegouvfr/react-dsfr/Range';
import { useState } from 'react';

export default function Page() {
  const [value, setValue] = useState(10);
  return (
    <>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <Range
        min={0}
        max={100}
        label="valeur"
        nativeInputProps={{
          value,
          onChange: (e) => {
            setValue(+e.target.value);
          },
        }}
      />
    </>
  );
}

[ddecrulle]

Bonjour,

Vous pouvez utiliser directement les projets d'exemples servant aux tests d’intégration disponibles dans le projet. Par exemple, pour le projet Vite, voici le lien : https://stackblitz.com/github/codegouvfr/react-dsfr/tree/main/test/integration/vite

Il faut simplement éditer le package.json et mettre la version de react-dsfr souhaitée

[totakoko]

@enguerranws Voici un lien pour reproduire : https://stackblitz.com/edit/github-xtks4n?file=src%2Fmain.tsx4

[ddecrulle]

Merci beaucoup, l'API Javascript du dsfr n'a pas l'air d'exposer la méthode update dont tu parles. Je leur ai envoyé un message pour être sûr.

[totakoko]

J'ai regardé un peu et j'ai l'impression qu'une interaction sur la page va déclencher un rerender/update de tous les composants dsfr natif. (fonction update)
Mais du coup si le composant est modifié programmatiquement, ce n'est pas détecté par le dsfr (pour le composant Range en tout cas).

[ddecrulle]

Les équipes du dsfr vont exposer la méthode js pour update le Range dans la prochaine release. Est-ce quelque chose de vraiment bloquant pour vous ou on peut attendre la prochaine release du dsfr pour corriger cela ?

[totakoko]

C'est pas bloquant du tout mais juste pas pratique visuellement si on veut faire des boutons réinitialiser par exemple.
Là on a fait un hack pour supprimer et recréer les Range, et ainsi avoir de nouveaux Range bien à jour..

Donc ça peut attendre. 👍

On a aussi d'autres sujets avec ce Range, comme par exemple on veut pouvoir avoir des filtres non linéaires (range double), cad avoir des fonctions de transformation pourcentage (Range) vers un intervalle quelconque et inversement.
Là, on doit mettre à jour hacker le output (bornes au dessus du range) pour afficher ce qu'on veut, idem avec les limites à gauche et à droite. car le range du DSFR est trop restrictif.

Merci pour la réactivité !

[ddecrulle]

La modification semble avoir été apportée côté DSFR, voir GouvernementFR/dsfr@a678f6b. Il ne reste plus qu’à attendre la fusion et la publication de ce changement !

[garronej]

@ddecrulle merci!