debug:

components/form/CandidateField.jsx

@@ -8,7 +8,7 @@ import {
   Input,
   InputGroup,
   InputGroupAddon,
-  Button, Modal, ModalHeader, ModalBody, ModalFooter
+  Button, Modal, ModalHeader, ModalBody, Form
 } from "reactstrap";
 import {useTranslation} from "react-i18next";
 import {
@@ -37,9 +37,20 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
   const [plusIcon, setPlusIcon] = useState("none");
 
   const addCandidate = () => {
+    if (label != "") {
     toggle();
     onAdd();
+    setSelectedState(!selected);
+    }
+    else {}
+  }
+  if (label != "") {
+  const type = "button";
   }
+  else {
+    const type = "submit";
+  }
+ 
   useEffect(() => {
     setClassName("candidateButton " + (selected ? "candidateAdded" : ""))
   }, [selected]);
@@ -67,14 +78,8 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
   const uploadToClient = (event) => {
     if (event.target.files && event.target.files[0]) {
       const i = event.target.files[0];
-
       setImage(i);
       setCreateObjectURL(URL.createObjectURL(i));
-
-
-
-
-
     }
   };
 
@@ -101,17 +106,9 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
 
         </ModalHeader>
         <ModalBody>
-
-
-
-
-
-
-
-
-
-          <Col className="addCandidateCard">
+     <Col className="addCandidateCard">
             <InputGroup className="addCandidateForm">
+              <Form>
               <InputGroupAddon addonType="prepend" className="addCandidateHeader">
                 <DragHandle>
                   <h6>Ajouter un participant</h6>
@@ -159,11 +156,14 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
               <Row className="removeAddButtons">
 
                 <ButtonWithConfirm className="removeButton" label={label} onDelete={removeCandidate} />
-                <Button className="addButton" label={label} onClick={addFunction}>
+             
+                <Button type={type} className="addButton" label={label} onClick={addCandidate}>
                   <FontAwesomeIcon icon={faPlus} />
                   <span>Ajouter</span>
                 </Button>
+
               </Row>
+              </Form>
             </InputGroup>
           </Col>
         </ModalBody></Modal>

components/form/CandidatesField.jsx

@@ -46,7 +46,7 @@ const CandidatesField = ({onChange}) => {
 
   useEffect(() => {
     addCandidate();
-    addCandidate();
+
   }, [])
 
 
@@ -78,10 +78,11 @@ const CandidatesField = ({onChange}) => {
       if (index + 1 === candidates.length) {
         addCandidate();
       }
-      else {
+      else { 
         candidates[index + 1].fieldRef.current.focus();
       }
     }
+    
   }
 
   const onSortEnd = ({oldIndex, newIndex}) => {

components/form/ConfirmModal.jsx

@@ -13,16 +13,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const ConfirmModal = ({ tabIndex, title, candidates, grades, isTimeLimited, start, finish, emails, restrictResult, className, confirmCallback }) => {
   const [visibled, setVisibility] = useState(false);
   const { t } = useTranslation();
-  const toggleConfirm = () => setVisibility(!visibled)
+  const toggle = () => setVisibility(!visibled)
 
   return (
     <div className="input-group-append">
-       <Button  onClick={toggleConfirm}
+       <Button  onClick={toggle}
         tabIndex={tabIndex} className={"mt-5 componentDesktop btn-transparent cursorPointer btn-validation mb-5 mx-auto" + className} >{t("Confirm")}<img src="/arrow-white.svg" /></Button>
                 <Button
 
                   className={"componentMobile btn-confirm-mobile mb-5" + className}
-                  onClick={toggleConfirm}
+                  onClick={toggle}
                   tabIndex={tabIndex}>
                   <FontAwesomeIcon className="mr-2" icon={faCheck} />
                   {t("Valider")}
@@ -30,11 +30,11 @@ const ConfirmModal = ({ tabIndex, title, candidates, grades, isTimeLimited, star
 
       <Modal
         isOpen={!visibled}
-        toggleConfirm={toggleConfirm}
+        toggle={toggle}
         className="modal-dialog-centered settings-modal"
       >
         <ModalHeader className="modal-header-settings">
-          <div onClick={toggleConfirm} className="btn-return-candidates"><FontAwesomeIcon icon={faArrowLeft} className="mr-2" />Retour aux paramètres</div>
+          <div onClick={toggle} className="btn-return-candidates"><FontAwesomeIcon icon={faArrowLeft} className="mr-2" />Retour aux paramètres</div>
           <Row>
             <Row className="stepForm">
               <Col className="stepFormCol">

pages/new/index.js

@@ -170,7 +170,9 @@ const CreateElection = (props) => {
   const handleSubmit = () => {
     const check = checkFields();
     if (!check.ok) {
-      alert("Saisissez ici le nom d'au moins deux candidats.");
+      toast.error(t(check.msg), {
+        position: toast.POSITION.TOP_CENTER,
+      });
       return;
     }
 
@@ -232,7 +234,9 @@ const CreateElection = (props) => {
   const handleFirstSubmit = () => {
     const check = checkFields();
     if (!check.ok) {
-     alert("Saisissez ici le nom d'au moins deux candidats.");
+      toast.error(t(check.msg), {
+        position: toast.POSITION.TOP_CENTER,
+      });
       return;
     }
     changeDisplay();