From 9eb58fe9a1f60ee5b8907078c73547aa8ada5e3c Mon Sep 17 00:00:00 2001
From: Thomas Jang <tom@axisj.com>
Date: Sun, 23 Jul 2023 23:14:22 +0900
Subject: [PATCH] Feature/onblur action disable (#141)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add disableOnBlurValidation

* Update readme

add missing props

* 예제 페이지 제작

* Remove unused code

---------

Co-authored-by: Da-hwon Ju <95617014+hwonda@users.noreply.github.com>
---
 README.md                             | 25 ++++++++++++--
 components/Nav.tsx                    |  1 +
 examples/DisableOnBlurValidation.tsx  | 48 +++++++++++++++++++++++++++
 pages/disableOnBlurValidation.tsx     | 24 ++++++++++++++
 react-multi-email/ReactMultiEmail.tsx |  8 +++--
 5 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 examples/DisableOnBlurValidation.tsx
 create mode 100644 pages/disableOnBlurValidation.tsx

diff --git a/README.md b/README.md
index 8f45bd5..8115fea 100644
--- a/README.md
+++ b/README.md
@@ -170,8 +170,7 @@ export default BasicExample;
     <td></td>
   </tr>
   <tr>
-    <td>
-    getLabel</td>
+    <td>getLabel</td>
     <td>
   (
     email: string,
@@ -189,6 +188,13 @@ export default BasicExample;
     <td>''</td>
     <td></td>
   </tr>
+  <tr>
+    <td>
+    inputClassName</td>
+    <td>string</td>
+    <td>''</td>
+    <td></td>
+  </tr>
   <tr>
     <td>
     placeholder</td>
@@ -217,13 +223,26 @@ export default BasicExample;
     <td>'[ ,;]'</td>
     <td></td>
   </tr>
-   <tr>
+  <tr>
     <td>
     autoComplete</td>
     <td>string | undefined</td>
     <td></td>
     <td></td>
   </tr>
+  <tr>
+    <td>initialInputValue</td>
+    <td>string | undefined</td>
+    <td>''</td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>
+    disableOnBlurValidation</td>
+    <td>boolean | undefined</td>
+    <td>false</td>
+    <td></td>
+  </tr>
 </table>
 
 ## License
diff --git a/components/Nav.tsx b/components/Nav.tsx
index da30b09..dd0651d 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -24,6 +24,7 @@ function Nav(_props: Props) {
         items={[
           { label: `Basic`, key: '/' },
           { label: `CustomizeStyle`, key: '/customizeStyle' },
+          { label: `DisableOnBlurValidation`, key: '/disableOnBlurValidation' },
         ]}
         onTabClick={async activeKey => {
           await router.push(activeKey);
diff --git a/examples/DisableOnBlurValidation.tsx b/examples/DisableOnBlurValidation.tsx
new file mode 100644
index 0000000..13534a1
--- /dev/null
+++ b/examples/DisableOnBlurValidation.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { ReactMultiEmail } from '../react-multi-email';
+
+interface Props {}
+
+function DisableOnBlurValidation(props: Props) {
+  const [emails, setEmails] = React.useState<string[]>([]);
+
+  return (
+    <Container>
+      <form>
+        <h3>Email</h3>
+        <ReactMultiEmail
+          placeholder='Input your email'
+          emails={emails}
+          onChange={(_emails: string[]) => {
+            setEmails(_emails);
+          }}
+          autoFocus={true}
+          disableOnBlurValidation
+          getLabel={(email, index, removeEmail) => {
+            return (
+              <div data-tag key={index}>
+                <div data-tag-item>{email}</div>
+                <span data-tag-handle onClick={() => removeEmail(index)}>
+                  ×
+                </span>
+              </div>
+            );
+          }}
+          onChangeInput={value => {
+            console.log(value);
+          }}
+        />
+        <br />
+        <h4>react-multi-email value</h4>
+        <p>{emails.join(', ') || 'empty'}</p>
+      </form>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  font-size: 13px;
+`;
+
+export default DisableOnBlurValidation;
diff --git a/pages/disableOnBlurValidation.tsx b/pages/disableOnBlurValidation.tsx
new file mode 100644
index 0000000..2c0807d3
--- /dev/null
+++ b/pages/disableOnBlurValidation.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { NextPage } from 'next';
+import { Container } from '../components/Layouts';
+import styled from '@emotion/styled';
+import BodyRoot from '../components/BodyRoot';
+import DisableOnBlurValidation from '../examples/DisableOnBlurValidation';
+
+const Custom: NextPage = () => {
+  return (
+    <PageContainer>
+      <Container>
+        <div>
+          <h2>DisableOnBlurValidation</h2>
+          <p>If the DisableOnBlurValidation value is true, email validation is not performed as a blur event.</p>
+          <DisableOnBlurValidation />
+        </div>
+      </Container>
+    </PageContainer>
+  );
+};
+
+const PageContainer = styled(BodyRoot)``;
+
+export default Custom;
diff --git a/react-multi-email/ReactMultiEmail.tsx b/react-multi-email/ReactMultiEmail.tsx
index 1a27232..8a4a432 100644
--- a/react-multi-email/ReactMultiEmail.tsx
+++ b/react-multi-email/ReactMultiEmail.tsx
@@ -29,6 +29,7 @@ export interface IReactMultiEmailProps {
   delimiter?: string;
   initialInputValue?: string;
   autoComplete?: string;
+  disableOnBlurValidation?: boolean;
   allowDisplayName?: boolean;
   stripDisplayName?: boolean;
 }
@@ -66,6 +67,7 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
     onKeyDown,
     onKeyUp,
     spinner,
+    disableOnBlurValidation = false,
   } = props;
   const emailInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -259,10 +261,12 @@ export function ReactMultiEmail(props: IReactMultiEmailProps) {
   const handleOnBlur = React.useCallback(
     async (e: React.SyntheticEvent<HTMLInputElement>) => {
       setFocused(false);
-      await findEmailAddress(e.currentTarget.value, true);
+      if (!disableOnBlurValidation) {
+        await findEmailAddress(e.currentTarget.value, true);
+      }
       onBlur?.();
     },
-    [findEmailAddress, onBlur],
+    [disableOnBlurValidation, findEmailAddress, onBlur],
   );
 
   const handleOnFocus = React.useCallback(() => {