Merge pull request #1876 from kamalqureshi/form_not_populating

Form child elements not populating

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx

@@ -208,17 +208,13 @@ const FormBaseComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
-      const editorContext = useContext(EditorContext);
-      const isLogicMode = editorContext.editorModeStatus === "logic" || editorContext.editorModeStatus === "both";
-      const isLayoutMode = editorContext.editorModeStatus === "layout" || editorContext.editorModeStatus === "both";
-      
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.resetAfterSubmit.propertyView({ label: trans("formComp.resetAfterSubmit") })}
           </Section>
 
-          {isLogicMode && (
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
@@ -229,22 +225,22 @@ const FormBaseComp = (function () {
             </>
           )}
 
-          {isLayoutMode && (
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.layout}>
                 {children.container.getPropertyView()}
               </Section>
             </>
           )}
 
-          {isLogicMode && (
+          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <Section name={sectionNames.advanced}>
               {children.initialData.propertyView({ label: trans("formComp.initialData") })}
               {children.invalidFormMessage.propertyView({ label: trans("formComp.invalidFormMessage") })}
             </Section>
           )}
 
-          {isLayoutMode && (
+          {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
               <Section name={sectionNames.style}>
                 {children.container.stylePropertyView()}
@@ -289,7 +285,8 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
   }
   traverseFormItems(consumer: (item: GridItemComp) => boolean) {
     return traverseCompTree(this.getCompTree(), (item) => {
-      return item.children.comp.children.formDataKey ? consumer(item as GridItemComp) : true;
+      const hasFormDataKey = item.children.comp.children.hasOwnProperty("formDataKey");
+      return hasFormDataKey ? consumer(item as GridItemComp) : true;
     });
   }
   validateFormItems() {
@@ -333,12 +330,19 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
     // For the properties, first find in data, then initialData, subcomponent default value (resetValue), empty value (clearValue)
     const newData = { ...(initialData ?? this.children.initialData.getView()), ...data };
 
+    // Only proceed if we have data to set
+    if (!Object.keys(newData).length) {
+      return Promise.resolve();
+    }
+
     return this.runMethodOfItems(
       {
         name: "setValue",
         getParams: (t) => {
           // use component name when formDataKey is empty
-          const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView();
+          const formDataKey = t.children.comp.children.formDataKey?.getView();
+          const componentName = t.children.name.getView();
+          const key = formDataKey || componentName;
           const value = newData[key];
           return value !== undefined ? [value as EvalParamType] : undefined;
         },
@@ -347,7 +351,9 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
         name: "setRange",
         getParams: (t) => {
           // use component name when formDataKey is empty
-          const key = t.children.comp.children.formDataKey?.getView() || t.children.name.getView();
+          const formDataKey = t.children.comp.children.formDataKey?.getView();
+          const componentName = t.children.name.getView();
+          const key = formDataKey || componentName;
           const value = newData[key] ? newData[key] : undefined;
           return value !== undefined ? [value as EvalParamType] : undefined;
         },
@@ -387,7 +393,8 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
       case CompActionTypes.UPDATE_NODES_V2: {
         const ret = super.reduce(action);
         // When the initial value changes, update the form
-          requestAnimationFrame(() => {
+        if (action.value["initialData"] !== undefined) {
+          queueMicrotask(() => {
             this.dispatch(
               customAction<SetDataAction>(
                 {
@@ -398,6 +405,7 @@ let FormTmpComp = class extends FormBaseComp implements IForm {
               )
             );
           });
+        }
         return ret;
       }
       case CompActionTypes.CUSTOM:
@@ -548,4 +556,4 @@ export function defaultFormData(compName: string, nameGenerator: NameGenerator):
       showFooter: true,
     },
   };
-}
+}

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

@@ -183,6 +183,12 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
     props.value.onChange(defaultValue)
   }, [defaultValue]);
 
+  useEffect(() => {
+    if (!changeRef.current) {
+      setLocalInputValue(inputValue);
+    }
+  }, [inputValue]);
+
   useEffect(() => {
     if (!changeRef.current) return;
 
@@ -214,6 +220,7 @@ export const useTextInputProps = (props: RecordConstructorToView<typeof textInpu
     debounce(function (value: string, valueCtx: any) {
       propsRef.current.value.onChange(value);
       propsRef.current.onEvent("change");
+      changeRef.current = false;  // Reset after commit
     }, 1000)
   );