This pull request addresses the issue where the eact-multi-email com… (…

…#171)

* This pull request addresses the issue where the 
eact-multi-email component does not respect custom email validation. The fix ensures that the component respects the user's custom validation by modifying and moving the initialEmailAddress function to prioritize the provided custom validation over the internal validation. Additionally, tests have NOT been updated to cover the fixed behavior. Please review and merge at your earliest convenience. Thank you!

* test added to emails.test.tsx - making sure the custom validation is returning the emails properly based on the validateEmail prop

* test added to emails.test.tsx - making sure the custom validation is returning the emails properly based on the validateEmail prop

react-multi-email/ReactMultiEmail.tsx

@@ -35,12 +35,6 @@ export interface IReactMultiEmailProps {
   allowDuplicate?: boolean;
 }
 
-const initialEmailAddress = (emails?: string[]) => {
-  if (typeof emails === 'undefined') return [];
-
-  const validEmails = emails.filter(email => isEmailFn(email));
-  return validEmails;
-};
 
 export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const {
@@ -77,6 +71,13 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const [inputValue, setInputValue] = React.useState(initialInputValue);
   const [spinning, setSpinning] = React.useState(false);
 
+  const initialEmailAddress = (emails?: string[]) => {
+    if (typeof emails === 'undefined') return [];
+
+    const validEmails = emails.filter(email => validateEmail ? validateEmail(email) : isEmailFn(email));
+    return validEmails;
+  };
+
   const findEmailAddress = React.useCallback(
     async (value: string, isEnter?: boolean) => {
       const validEmails: string[] = [];

test/emails.test.tsx

@@ -74,3 +74,29 @@ describe('ReactMultEmail emails TEST', () => {
     expect(emptyElement).toBeTruthy();
   });
 });
+
+
+it('Emails with custom validation', async () => {
+
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]/;
+
+  const mockValidateEmailFunc = jest.fn().mockImplementation((email) => regex.test(email));
+
+  render(
+    <ReactMultiEmail
+      validateEmail={(mockValidateEmailFunc)}
+      emails={['abc@gmail','abc','def', '[email protected]']}
+      getLabel={(email, index) => {
+        return (
+          <div data-tag key={index}>
+            <div data-tag-item>{email}</div>
+          </div>
+        );
+      }}
+    />,
+  );
+
+  const emailsWrapper = document.querySelector('.data-labels');
+  // 4 emails are passed to the component, but only 2 are valid based on the custom validation.
+  expect(emailsWrapper?.childElementCount).toEqual(2);
+});