fix: email input

components/ListInput.tsx

@@ -1,27 +1,27 @@
-import { useTranslation } from 'next-i18next';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Row, Col } from 'reactstrap';
-import { useState } from 'react';
+import {useTranslation} from 'next-i18next';
+import {faXmark} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Row, Col} from 'reactstrap';
+import {useState} from 'react';
 import Button from '@components/Button';
 
-const InputField = ({ value, onDelete }) => {
+const InputField = ({value, onDelete}) => {
   return (
     <Button
       customIcon={<FontAwesomeIcon icon={faXmark} onClick={onDelete} />}
       className="bg-light text-primary border-0"
       outline={true}
-      style={{ boxShadow: 'unset' }}
+      style={{boxShadow: 'unset'}}
     >
       {value}
     </Button>
   );
 };
 
-const ListInput = ({ onEdit, inputs, validator }) => {
+const ListInput = ({onEdit, inputs, validator}) => {
   const [state, setState] = useState('');
 
-  const { t } = useTranslation();
+  const {t} = useTranslation();
 
   const handleDelete = (position: number) => {
     const inputCopy = [...inputs];
@@ -30,17 +30,54 @@ const ListInput = ({ onEdit, inputs, validator }) => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' || e.key === 'Tab' || e.key === ';') {
-      if (validator(state)) {
-        onEdit([...inputs, state]);
-        setState('');
+    // if we press delete, we remove the last input
+    if (e.key === "Backspace") {
+      if (state === "") {
+        onEdit([...inputs.slice(0, -1)]);
+        return
       }
+      else {
+        setState(state.slice(0, -1));
+      }
+    }
+
+    if (['Enter', 'Tab', ';', ' ', ','].includes(e.key) && validator(state.trim())) {
+      onEdit([...inputs, state]);
+      setState('');
     }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setState(e.target.value);
-  };
+    const splittingCharacters = ['Enter', 'Tab', ';', ' ', ',']
+
+    const lastCharacter = e.target.value[e.target.value.length - 1]
+    if (!splittingCharacters.includes(lastCharacter)) {
+      setState(e.target.value);
+    };
+
+    // Check if we have a splitting character on the target value
+    // This happens for example when we copy paste a list of emails
+    if (splittingCharacters.some(character => e.target.value.includes(character))) {
+      const splits = e.target.value.split(/[,;\t\n ]/)
+      const validEmails = []
+      const invalidEmails = []
+
+      splits.forEach((email) => {
+        if (email == '')
+          return
+        if (validator(email)) {
+          validEmails.push(email)
+        }
+        else {
+          invalidEmails.push(email)
+        }
+      });
+
+      onEdit([...inputs, ...validEmails])
+      setState(invalidEmails.join(', '))
+    };
+
+  }
 
   return (
     <Row className="list_input gx-2 p-1  my-3 align-items-center">
@@ -56,7 +93,7 @@ const ListInput = ({ onEdit, inputs, validator }) => {
           placeholder={t('admin.private-placeholder')}
           onKeyDown={handleKeyDown}
           onChange={handleChange}
-          value={state.replace(';', '')}
+          value={state}
         />
       </Col>
     </Row>