fix: validation prop failed to validate when used with async/await

Fixes #152

dist/index.d.ts

@@ -44,7 +44,7 @@ export interface EdiTextProps {
      * takes one param -> `value`.
      * It must return `true` or `false`
      */
-    validation?: (...args: string[]) => boolean;
+    validation?: (...args: string[]) => boolean | Promise<boolean>;
     /**
      * will be called when validation fails.
      * takes one param <value> which is the current value of input

example/yarn.lock

@@ -7164,7 +7164,7 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
-loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9219,9 +9219,11 @@ react-dev-utils@^11.0.3:
 
 "react-dom@link:../node_modules/react-dom":
   version "0.0.0"
+  uid ""
 
 "react-editext@link:..":
-  version "5.0.0"
+  version "0.0.0"
+  uid ""
 
 react-error-overlay@^6.0.9:
   version "6.0.11"
@@ -9327,6 +9329,7 @@ react-syntax-highlighter@^15.5.0:
 
 "react@link:../node_modules/react":
   version "0.0.0"
+  uid ""
 
 read-pkg-up@^7.0.1:
   version "7.0.1"
@@ -9787,6 +9790,13 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

src/index.spec.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React, { useState } from 'react';
 import EdiText from '.';
 import { cancelOnConflictMessage } from './utils';
 
@@ -141,7 +141,7 @@ test('using cancelOnUnfocus and submitOnUnfocus together warns the user', () =>
   expect(warn).toBeCalledWith(cancelOnConflictMessage);
 });
 
-test('default validation handling is working', () => {
+test('default validation handling is working', async () => {
   const v = jest.fn((v: string) => v.length > 10);
   const { container } = render(
     <EdiText validation={v} value={VALUE} onSave={(v) => false} />
@@ -153,12 +153,14 @@ test('default validation handling is working', () => {
   fireEvent.change(input, { target: { value: 'Hello' } });
   const saveBtn = container.querySelector('[editext="save-button"]');
   saveBtn && fireEvent.click(saveBtn, new MouseEvent('click'));
-  expect(input).toBeInTheDocument();
-  expect(screen.getByText('Invalid Value'));
+  await waitFor(() => {
+    expect(input).toBeInTheDocument();
+    expect(screen.getByText('Invalid Value'));
+  });
   expect(v).toBeCalledTimes(1);
 });
 
-test('custom validation handling is working', () => {
+test('custom validation handling is working', async () => {
   const v = jest.fn((v: string) => v.length > 10);
   const message = 'At least 10 character...';
   const { container } = render(
@@ -176,15 +178,17 @@ test('custom validation handling is working', () => {
   fireEvent.change(input, { target: { value: 'Hello' } });
   const saveBtn = container.querySelector('[editext="save-button"]');
   saveBtn && fireEvent.click(saveBtn, new MouseEvent('click'));
-  expect(input).toBeInTheDocument();
-  expect(screen.getByText(message));
-  expect(v).toBeCalledTimes(1);
+  await waitFor(() => {
+    expect(input).toBeInTheDocument();
+    expect(screen.getByText(message));
+    expect(v).toBeCalledTimes(1);
+  });
 });
 
-test('onValidationCancel is working', () => {
+test('onValidationFail is working', async () => {
   const v = jest.fn((v: string) => v.length > 10);
   const f = jest
-    .fn((v: string) => console.log('validation failed.'))
+    .fn((v: string) => console.log(`validation failed for ${v}`))
     .mockImplementation(() => {});
   const { container } = render(
     <EdiText
@@ -201,7 +205,10 @@ test('onValidationCancel is working', () => {
   fireEvent.change(input, { target: { value: 'Hello' } });
   const saveBtn = container.querySelector('[editext="save-button"]');
   saveBtn && fireEvent.click(saveBtn, new MouseEvent('click'));
-  expect(input).toBeInTheDocument();
+  await waitFor(() => {
+    expect(input).toBeInTheDocument();
+  });
+
   expect(v).toBeCalledTimes(1);
   expect(f).toBeCalledTimes(1);
 });

src/index.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable react/prop-types */
 import React, {
-  useEffect,
-  KeyboardEvent,
+  ChangeEvent,
   FocusEvent,
+  KeyboardEvent,
+  useEffect,
   useState,
-  ChangeEvent,
 } from 'react';
 import styles from './styles.module.css';
 import {
   cancelOnConflictMessage,
-  dataAttributes,
   classnames,
+  dataAttributes,
   defaultValidationMessage,
   getCanEdit,
 } from './utils';
@@ -90,7 +90,7 @@ export interface EdiTextProps {
    * takes one param -> `value`.
    * It must return `true` or `false`
    */
-  validation?: (...args: string[]) => boolean;
+  validation?: (...args: string[]) => boolean | Promise<boolean>;
   /**
    * will be called when validation fails.
    * takes one param <value> which is the current value of input
@@ -333,12 +333,12 @@ function EdiText(props: EdiTextProps) {
     }
   }
 
-  function handleSave(): void {
+  async function handleSave(): Promise<void> {
     if (typeof props.validation === 'function') {
-      const isValid = props.validation(valueInternal);
+      const isValid = await props.validation(valueInternal);
       if (!isValid) {
         setValid(false);
-        props.onValidationFail && props.onValidationFail(valueInternal);
+        await props.onValidationFail?.(valueInternal);
         return;
       }
     }