From 884fb29a23829600e60bf76a7dbe740b8abaf3a4 Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com> Date: Tue, 1 Jul 2025 10:07:07 +0530 Subject: [PATCH] [fix]: Form bug on refresh fields (#13113) * fix: handled deisgn feedback for loader, refreshing the form was causing the component duplication, checkbox issue on refresh form * fix: Fixed the unmounting issue on the dataSectionUI --- .../_components/ColumnMappingComponent.jsx | 37 +++++++++++++++---- .../Components/Form/_hooks/useFormLogic.js | 6 +++ .../Form/handlers/parameterHandlers.js | 1 + .../Inspector/Components/Form/utils/utils.js | 8 ++-- .../RightSideBar/Inspector/Inspector.jsx | 2 +- 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx index 0401c22d57..df6d51e5e0 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_components/ColumnMappingComponent.jsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useMemo, useEffect } from 'react'; +import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react'; import { Button } from '@/components/ui/Button/Button'; import Checkbox from '@/components/ui/Checkbox/Index'; import cx from 'classnames'; @@ -78,10 +78,8 @@ const ModalFooter = ({ currentStatus, refreshData, handleSubmit, isSaving, allSe * Loader component */ const LoaderComponent = () => ( -
-
- -
+
+
); @@ -388,19 +386,40 @@ const ColumnMappingComponent = ({ const [isSaving, setIsSaving] = useState(false); const [refreshedColumns, setRefreshedColumns] = useState([]); const [showLoader, setShowLoader] = useState(false); + const bodyContainerRef = useRef(null); + const lastBodyHeightRef = useRef(60); useEffect(() => { setShowLoader(isDataLoading); }, [isDataLoading]); + // Track body height when content is loaded + useEffect(() => { + if (!showLoader && bodyContainerRef.current) { + // Use setTimeout to ensure DOM is fully rendered + setTimeout(() => { + if (bodyContainerRef.current) { + const height = bodyContainerRef.current.scrollHeight; + if (height > 0) { + lastBodyHeightRef.current = height; + } + } + }, 0); + } + }, [showLoader, groupedColumns]); + const currentStatus = currentStatusRef.current; + console.log('here--- existingResolvedJsonData--- ', existingResolvedJsonData); + const columnsToUse = useColumnBuilder( component, currentStatus, newResolvedJsonData, existingResolvedJsonData, - refreshedColumns?.length === 0 ? newResolvedJsonData : refreshedColumns, + refreshedColumns?.length === 0 || Object.keys(refreshedColumns).length === 0 + ? newResolvedJsonData + : refreshedColumns, getFormFields, getComponentDefinition ); @@ -459,7 +478,11 @@ const ColumnMappingComponent = ({ const modalBody = ( <> -
+
{showLoader && } {!showLoader && ( diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js index 1d0636d222..0484f64f26 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/_hooks/useFormLogic.js @@ -26,6 +26,12 @@ export const useFormLogic = (component, paramUpdated) => { // Save data section function const saveDataSection = (fields) => { formState.savedSourceValue.current = formState.source.value; + const newJsonData = formState.JSONData; + + if (newJsonData?.value === undefined) { + newJsonData.value = resolveReferences('canvas', formState.source.value); + } + saveFormDataSectionData( component?.id, { diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js index 47747cff87..a120175f67 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/handlers/parameterHandlers.js @@ -29,6 +29,7 @@ export const createParamUpdatedInterceptor = ({ const { generateFormFrom, JSONData } = getFormDataSectionData(component?.id); if (value === generateFormFrom?.value) { + setSource((prev) => ({ ...prev, value })); return setJSONData({ value: JSONData.value }); } diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js index 3ac6b40a98..d5bb362dda 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Form/utils/utils.js @@ -256,18 +256,18 @@ export const mergeFormFieldsWithNewData = (existingFields, newFields) => { const existingFieldsMap = {}; existingFields.forEach((field) => { - if (field.name) { - existingFieldsMap[field.name] = field; + if (field.key) { + existingFieldsMap[field.key] = field; } }); return newFields.map((newField) => { - if (newField.isNew || !existingFieldsMap[newField.name]) { + if (newField.isNew || !existingFieldsMap[newField.key]) { return newField; } return { ...newField, - ...omit(existingFieldsMap[newField.name], ['isNew']), + ...omit(existingFieldsMap[newField.key], ['isNew']), }; }); }; diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx index 278ec7b094..cf1558c893 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx @@ -819,7 +819,7 @@ const GetAccordion = React.memo( return ; case 'Form': - return
; + return ; case 'DropdownV2': case 'MultiselectV2':