3cn-ecn/nantralPlatform

[TICKET] Corriger le scroll dans les forms event et post

Closed this issue · 0 comments

Description

Le scroll est cassé dans les modals avec un form : normalement, le header (titre de la modal) et le footer (boutons de validation) doivent toujours être accessibles.

Actuel Attendu
image image

Definition of done

The ticket can be considered as done if all theses criteria are completed:

  • Le footer est toujours visible

Technical strategy

Le problème vient de la balise form qui est entre les balises ResponsiveDialog et ResponsiveDialogContent:

<ResponsiveDialog>
   <ResponsiveDialogHeader>...</ResponsiveDialogHeader>
   <form onSubmit={...}>
      <ResponsiveDialogContent>...</ResponsiveDialogContent>
      <ResponsiveDialogFooter>
         <button type="submit">
      </ResponsiveDialogFooter>
   </form>
</ResponsiveDialog>

Il faut remplacer la structure en déplaçant le form dans ResponsiveDialogContent, et en ajoutant une référence vers le form sur le bouton de validation pour le lier au form.

<ResponsiveDialog>
   <ResponsiveDialogHeader>...</ResponsiveDialogHeader>
   <ResponsiveDialogContent>
      <form onSubmit={...} id="id-du-form"> // id à modifier
         {...}
      </form>
   </ResponsiveDialogContent>
   <ResponsiveDialogFooter>
      <button type="submit" form="id-du-form">
   </ResponsiveDialogFooter>
</ResponsiveDialog>