Bug - custom validation (validateEmail) overwritten by initialEmailAddress function.

[Elnatanv]

Description

The issue arises when utilizing the validateEmail prop with a custom validation in react-multi-email. The library returns the email only if it passes its internal validation, thereby overwriting the custom validation. This occurs within the initialEmailAddress function, which executes within a useEffect with the emails array as a dependency. Consequently, each time a user adds emails, the function fires and overrides the custom validation. The culprit is in the filter function applied to the emails array, which forces validation via isEmailFn, thus disregarding the custom validation.

const initialEmailAddress = (emails?: string[]) => {
  if (typeof emails === 'undefined') return [];

  const validEmails = emails.filter(email => isEmailFn(email));
  return validEmails;
};

Fix suggestion

Move initialEmailAddress function inside the component. right under the useStates. And change the function to look like this:

const initialEmailAddress = (emails?: string[]) => {
  if (typeof emails === 'undefined') return [];

  const validEmails = emails.filter(email => validateEmail ? validateEmail(email) : isEmailFn(email));
  return validEmails;
};

Steps to Reproduce

1. Add the validateEmail prop with a custom validation.
2. Input an email that passes the custom validation but fails the library's isEmail validation.
3. Observe that the component removes the email instead of adding it.

Expected Behavior

The component should respect the user's intention to employ a custom validation.

Actual Behavior

The component fails to respect the custom validation and instead prioritizes the library's isEmail validation.

Additional Notes

• PR created: https://github.com/axisj/react-multi-email/pull/171 (including test case)
• Currently, I have temporarily copied the library files to my project with the fix implemented. Once the PR is merged, I will revert to using the library directly.