Fix multiple calls when executeChangeOnBlur is false applying debounc…

src/helpers/debounce.ts

@@ -0,0 +1,7 @@
+export function debounce(callback: (...args: any) => void, delay: number) {
+  let timer: number;
+  return (...args: any) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback(...args), delay)
+  }
+}

src/lib/core.tsx

@@ -4,6 +4,7 @@ import regex from './regex'
 
 import { get as get_ } from 'lodash'
 import { hasKey } from '../helpers/hasKey'
+import { debounce } from '../helpers/debounce'
 
 export type Tvalidation = {
   isValid: boolean
@@ -303,6 +304,12 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     }
   }
 
+  private debouncedFormChange = debounce(newState => {
+    if (!this.props.onFormChange) return;
+
+    this.props.onFormChange(newState)
+  },this.props.delayToDebounceChange ?? 500)
+
   onFieldsChange(field: Field<any>, val: any, doOnChange: boolean) {
     const { validationForm, usedFields, fieldsState } = this.state
 
@@ -338,6 +345,10 @@ export default class Core<T> extends PureComponent<Props<T>, IState<T>> {
     })
 
     if (doOnChange && this.props.onFormChange) {
+      if (!this.props.executeChangeOnBlur && this.props.executeDebounceChange) {
+        this.debouncedFormChange(newState)
+        return;
+      }
       this.props.onFormChange(newState)
     }
   }
@@ -418,6 +429,8 @@ Core.defaultProps = {
   fields: [],
   onFormChange: () => {},
   executeChangeOnBlur: true,
+  executeDebounceChange: false,
+  delayToDebounceChange: 500,
   defaultState: {},
   parseState: () => {},
   showValidation: false,

src/types/index.ts

@@ -61,6 +61,8 @@ export interface Props<T> {
   defaultState?: T
   parseState?: Function
   executeChangeOnBlur?: boolean
+  executeDebounceChange?: boolean
+  delayToDebounceChange?: number
 }
 
 export interface FormComponent {

stories/1-Basic.stories.tsx

@@ -262,6 +262,33 @@ export const WithRef = () => {
   )
 }
 
+export const WithDebounceChange = () => (
+  <DForm
+    executeChangeOnBlur={false}
+    executeDebounceChange
+    onFormChange={() => console.log("executeDebounceChange")}
+    fields={[
+      {
+        fields: [
+          {
+            name: "name",
+            placeholder: "Name",
+            type: "Input",
+            props: {
+              onKeyPress: (e) => {
+                if (e.which == 32) {
+                  e.preventDefault();
+                  console.log("Space Detected");
+                  return false;
+                }
+              },
+            },
+          },
+        ],
+      },
+    ]}
+  />
+)
 // export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
 // export const Emoji = () => (