feat: correct debounce for inputs

Author: nicosammito

src/packages/ce/src/datatype/components/inputs/generic/DataTypeGenericInputComponent.tsx

@@ -12,27 +12,61 @@ export const DataTypeGenericInputComponent: React.FC<DataTypeGenericInputCompone
     const {title, description, onChange, formValidation} = props
 
     const onChangeDebounced = useDebouncedCallback((value: LiteralValue | NodeFunction | ReferenceValue | null) => {
-        formValidation?.setValue?.(value)
         onChange?.(value)
     }, 200)
 
     return <>
         <InputLabel>{title}</InputLabel>
         <InputDescription>{description}</InputDescription>
         <ButtonGroup color={"secondary"}>
-            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: 0})}>
+            <Button color={"tertiary"} onClick={() => {
+                formValidation?.setValue?.({
+                    __typename: "LiteralValue", value: 0
+                })
+                onChangeDebounced({
+                    __typename: "LiteralValue", value: 0
+                })
+            }}>
                 Number Value
             </Button>
-            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: false})}>
+            <Button color={"tertiary"} onClick={() => {
+                formValidation?.setValue?.({
+                    __typename: "LiteralValue", value: false
+                })
+                onChangeDebounced({
+                    __typename: "LiteralValue", value: false
+                })
+            }}>
                 Boolean Value
             </Button>
-            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: ""})}>
+            <Button color={"tertiary"} onClick={() => {
+                formValidation?.setValue?.({
+                    __typename: "LiteralValue", value: ""
+                })
+                onChangeDebounced({
+                    __typename: "LiteralValue", value: ""
+                })
+            }}>
                 Text Value
             </Button>
-            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: []})}>
+            <Button color={"tertiary"} onClick={() => {
+                formValidation?.setValue?.({
+                    __typename: "LiteralValue", value: []
+                })
+                onChangeDebounced({
+                    __typename: "LiteralValue", value: []
+                })
+            }}>
                 List Value
             </Button>
-            <Button color={"tertiary"} onClick={() => onChangeDebounced({__typename: "LiteralValue", value: {}})}>
+            <Button color={"tertiary"} onClick={() => {
+                formValidation?.setValue?.({
+                    __typename: "LiteralValue", value: {}
+                })
+                onChangeDebounced({
+                    __typename: "LiteralValue", value: {}
+                })
+            }}>
                 Data Value
             </Button>
         </ButtonGroup>

src/packages/ce/src/datatype/components/inputs/json/DataTypeJSONInputComponent.tsx

@@ -29,9 +29,8 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
     const [collapsedState, setCollapsedStateRaw] = React.useState<Record<string, boolean>>({})
 
     const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | NodeFunction | ReferenceValue | null) => {
-        formValidation?.setValue?.(value)
         onChange?.(value)
-    }, 400)
+    }, 200)
 
     const value = React.useMemo(
         () => initialValue ?? (("functionSchema" in schema ? schema.functionSchema.input === "list" : schema.input === "list") ? {
@@ -59,14 +58,20 @@ export const DataTypeJSONInputComponent: React.FC<DataTypeJSONInputComponentProp
                     entry={editEntry}
                     value={value as LiteralValue}
                     onOpenChange={open => setEditDialogOpen(open)}
-                    onObjectChange={onChangeDebounced}
+                    onObjectChange={(value) => {
+                        formValidation?.setValue?.(value)
+                        onChangeDebounced(value)
+                    }}
                 />
             )}
             <InputLabel>{title}</InputLabel>
             <InputDescription>{description}</InputDescription>
             <DataTypeInputValueComponent inside
                                          initialValue={value}
-                                         onChange={onChangeDebounced}
+                                         onChange={(value) => {
+                                             formValidation?.setValue?.(value)
+                                             onChangeDebounced(value)
+                                         }}
                                          suggestions={suggestions}
                                          formValidation={formValidation}>
                 <DataTypeJSONInputTreeComponent

src/packages/ce/src/datatype/components/inputs/sub-flow/DataTypeSubFlowInputComponent.tsx

@@ -32,24 +32,22 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
     const result = useFunctionSuggestions()
 
     const onChangeDebounced = useDebouncedCallback((value: LiteralValue | SubFlowValue | ReferenceValue | NodeFunction | null) => {
-
-        if (value?.__typename === "NodeFunction") {
-            const nodeId = flowService.addNodeById(flowId, value)
-            value = {
-                __typename: "SubFlowValue",
-                startingNodeId: nodeId
-            }
-        }
-
-        formValidation?.setValue?.(value ?? null)
         onChange?.(value ?? null)
     }, 200)
 
     return React.useMemo(() => <>
         <SuggestionDialogComponent suggestions={[...suggestions!, ...result]}
                                    open={suggestionDialogOpen}
-                                   onSuggestionSelect={suggestion => {
-                                       onChangeDebounced(suggestion as NodeFunction)
+                                   onSuggestionSelect={value => {
+                                       if (value?.__typename === "NodeFunction") {
+                                           const nodeId = flowService.addNodeById(flowId, value)
+                                           value = {
+                                               __typename: "SubFlowValue",
+                                               startingNodeId: nodeId
+                                           }
+                                       }
+                                       formValidation?.setValue?.(value ?? null)
+                                       onChangeDebounced(value as NodeFunction)
                                    }}
                                    onOpenChange={setSuggestionDialogOpen}/>
         <InputLabel>{title}</InputLabel>
@@ -62,7 +60,17 @@ export const DataTypeSubFlowInputComponent: React.FC<DataTypeSubFlowInputCompone
                                          }
                                      }}
                                      initialValue={initialValue}
-                                     onChange={onChangeDebounced}
+                                     onChange={(value) => {
+                                         if (value?.__typename === "NodeFunction") {
+                                             const nodeId = flowService.addNodeById(flowId, value)
+                                             value = {
+                                                 __typename: "SubFlowValue",
+                                                 startingNodeId: nodeId
+                                             }
+                                         }
+                                         formValidation?.setValue?.(value ?? null)
+                                         onChangeDebounced(value ?? null)
+                                     }}
                                      suggestions={suggestions}
                                      formValidation={formValidation}>
             <Text>Select next node</Text>