From a5c9e352e2cf4dfa1e1cd0b661130ef3fe6e687d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=98=95=EC=84=9D?= <gudtjr3437@jobkorea.co.kr>
Date: Sun, 16 Jul 2023 13:42:31 +0900
Subject: [PATCH 1/3] Fix logic about props 'emails'

---
 react-multi-email/ReactMultiEmail.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/react-multi-email/ReactMultiEmail.tsx b/react-multi-email/ReactMultiEmail.tsx
index 02bbb74..ee1a111 100644
--- a/react-multi-email/ReactMultiEmail.tsx
+++ b/react-multi-email/ReactMultiEmail.tsx
@@ -35,11 +35,16 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const {
     id,
     style,
-    getLabel,
+    emails: propsEmails,
     className = '',
     noClass,
     placeholder,
     autoFocus,
+    delimiter = '[ ,;]',
+    initialInputValue = '',
+    inputClassName,
+    autoComplete,
+    getLabel,
     enable,
     onDisabled,
     validateEmail,
@@ -50,22 +55,18 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
     onKeyDown,
     onKeyUp,
     spinner,
-    delimiter = '[ ,;]',
-    initialInputValue = '',
-    inputClassName,
-    autoComplete,
   } = props;
   const emailInputRef = React.useRef<HTMLInputElement>(null);
 
   const [focused, setFocused] = React.useState(false);
-  const [emails, setEmails] = React.useState<string[]>([]);
+  const [emails, setEmails] = React.useState<string[]>(propsEmails ?? []);
   const [inputValue, setInputValue] = React.useState(initialInputValue);
   const [spinning, setSpinning] = React.useState(false);
 
   const findEmailAddress = React.useCallback(
     async (value: string, isEnter?: boolean) => {
       const validEmails: string[] = [];
-      let inputValue: string = '';
+      let inputValue = '';
       const re = new RegExp(delimiter, 'g');
       const isEmail = validateEmail || isEmailFn;
 
@@ -235,10 +236,6 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
     onFocus?.();
   }, [onFocus]);
 
-  React.useEffect(() => {
-    setEmails(props.emails ?? []);
-  }, [props.emails]);
-
   return (
     <div
       className={`${className} ${noClass ? '' : 'react-multi-email'} ${focused ? 'focused' : ''} ${

From 100f397f0bdda441a8af06d6b2dd51a9785ea88f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=98=95=EC=84=9D?= <gudtjr3437@jobkorea.co.kr>
Date: Sun, 16 Jul 2023 14:28:56 +0900
Subject: [PATCH 2/3] Fix check validation about props 'emails'

---
 react-multi-email/ReactMultiEmail.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/react-multi-email/ReactMultiEmail.tsx b/react-multi-email/ReactMultiEmail.tsx
index ee1a111..a8e92de 100644
--- a/react-multi-email/ReactMultiEmail.tsx
+++ b/react-multi-email/ReactMultiEmail.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isEmail as isEmailFn } from './isEmail';
+import { isEmail, isEmail as isEmailFn } from './isEmail';
 
 export interface IReactMultiEmailProps {
   id?: string;
@@ -59,10 +59,17 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const emailInputRef = React.useRef<HTMLInputElement>(null);
 
   const [focused, setFocused] = React.useState(false);
-  const [emails, setEmails] = React.useState<string[]>(propsEmails ?? []);
+  const [emails, setEmails] = React.useState<string[]>(() => initialEmailAddress(propsEmails));
   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 => isEmail(email));
+    return validEmails;
+  };
+
   const findEmailAddress = React.useCallback(
     async (value: string, isEnter?: boolean) => {
       const validEmails: string[] = [];

From 2c3466f144b3ac923fd1ccc5e7f6e3b4589dc114 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=98=95=EC=84=9D?= <gudtjr3437@jobkorea.co.kr>
Date: Sun, 16 Jul 2023 14:36:10 +0900
Subject: [PATCH 3/3] Fix check validation about props 'emails'

---
 react-multi-email/ReactMultiEmail.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/react-multi-email/ReactMultiEmail.tsx b/react-multi-email/ReactMultiEmail.tsx
index a8e92de..d73ea2d 100644
--- a/react-multi-email/ReactMultiEmail.tsx
+++ b/react-multi-email/ReactMultiEmail.tsx
@@ -31,6 +31,13 @@ export interface IReactMultiEmailProps {
   autoComplete?: string;
 }
 
+const initialEmailAddress = (emails?: string[]) => {
+  if (typeof emails === 'undefined') return [];
+
+  const validEmails = emails.filter(email => isEmail(email));
+  return validEmails;
+};
+
 export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const {
     id,
@@ -63,13 +70,6 @@ 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 => isEmail(email));
-    return validEmails;
-  };
-
   const findEmailAddress = React.useCallback(
     async (value: string, isEnter?: boolean) => {
       const validEmails: string[] = [];