Composant Checkbox : Si plusieurs options séléctionnées, seule la dernière est enregistrée dans le state du form.

[Charlesdoiron]

Bonjour ! Un grand bravo pour cette lib qui fait gagner un temps fou. Je rencontre un problème stupide de checkbox et je voudrais un avis avant de me lancer dans un truc plus compliqué ! En gros j'utilise des checkbox avec plusieurs options. Je passe par un form html et sa method onSubmit. Pas de lib, juste du html.

Mon soucis est simple, si je séléctionne plusieurs options, seule la dernière est sauvé dans le state du form.

la checkbox:

<Checkbox
        legend="Que ne pouvez-vous pas faire ?"
        options={[
          {
            label: "Appeler ou envoyer des SMS",
            nativeInputProps: {
              name: "incidentDeviceType",
              value: IncidentDeviceType.MOBILE,
            },
          },
          {
            label: "Accéder à internet",
            nativeInputProps: {
              name: "incidentDeviceType",
              value: IncidentDeviceType.INTERNET,
            },
          },
        ]}
        state={error?.includes("incident_device_type") ? "error" : "default"}
        stateRelatedMessage="Merci de sélectionner au moins une option"
      />

le form:

<form  onSubmit={onSubmit}>
    {... les inputs}
</form> 

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    ...
  }

Si je coche l'option Internet et l'option Mobile, une seule est postée par le form et non les deux.

Y'a t-il quelque chose que je loupe ? Est ce que je dois mettre des handlers sur les onChange de toutes les options ? Merci et avec plaisir pour mettre la doc à jour

[ddecrulle]

Hello merci pour le feedback.

J'ai testé rapidement avec ce code je n'ai pas rencontré le souci que tu mentionnes :

function onSubmit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        const incidentDeviceTypes = formData.getAll('IncidentDeviceType');
        console.log(incidentDeviceTypes);

}

et dans le jsx :

<form onSubmit={onSubmit}>
                <Checkbox
                    legend="Que ne pouvez-vous pas faire ?"
                    options={[
                        {
                        label: "Appeler ou envoyer des SMS",
                        nativeInputProps: {
                            name: "IncidentDeviceType",
                            value: "MOBILE",
                        },
                        },
                        {
                        label: "Accéder à internet",
                        nativeInputProps: {
                            name: "IncidentDeviceType", // Ajouter des crochets
                            value: "INTERNET",
                        },
                        },
                    ]}
                    />
                    <Button type="submit">Soumission</Button>
                </form>

Tu me confirmes ?

[Charlesdoiron]

Hello @ddecrulle , je te comfirme que ça marche correctement, c'est donc un soucis de compréhension chez moi du formData. Je vais trouver un moyen de récupérer les id des toutes les checkbox dynamiquement.

Merci !