Feature/onblur action disable (#141)

* add disableOnBlurValidation

* Update readme

add missing props

* 예제 페이지 제작

* Remove unused code

---------

Co-authored-by: Da-hwon Ju <[email protected]>

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

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);

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;

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;

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(() => {