df-ae-forms-package 1.0.95 → 1.0.96

package/dist/index.js

@@ -4712,13 +4712,8 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
 const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onDataGridSelect, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, onEntryAdd, onEntryRemove, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const [isCollapsed, setIsCollapsed] = React.useState(false);
     const hasInitialized = React.useRef(false);
-    // Use a ref for localFormData so renderComponent doesn't need it in deps
-    // This prevents DfFormInput from resetting its internal state on every keystroke
-    const localFormDataRef = React.useRef({ ...formData });
-    // Keep ref in sync with formData prop (parent updates), but never overwrite user-typed values
-    React.useEffect(() => {
-        localFormDataRef.current = { ...formData, ...localFormDataRef.current };
-    }, [formData]);
+    // Track local form values for entry components to prevent value loss during parent round-trip
+    const localFormValuesRef = React.useRef({});
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map(comp => ({
         ...comp,
@@ -4796,87 +4791,6 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     }
                 }
             }
-            else {
-                // Update existing entries to include all template components and sync their properties
-                const needsUpdate = dataEntries.some(entry => {
-                    // Check if entry is missing any template components or if existing components need updates
-                    return gridComponents.some((templateComp, componentIndex) => {
-                        const existingComponent = entry.components?.[componentIndex];
-                        if (!existingComponent) {
-                            return true; // Missing component at this index
-                        }
-                        // We don't check for ID matches here anymore
-                        // const expectedId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
-                        // const hasProperId = existingComponent.id === expectedId
-                        // Check if existing component needs to be updated with new template properties
-                        // Compare key properties that should be synced
-                        const needsPropertyUpdate = JSON.stringify(existingComponent.basic?.options) !== JSON.stringify(templateComp.basic?.options) ||
-                            existingComponent.basic?.placeholder !== templateComp.basic?.placeholder ||
-                            existingComponent.basic?.defaultValue !== templateComp.basic?.defaultValue ||
-                            existingComponent.basic?.label !== templateComp.basic?.label ||
-                            existingComponent.validation?.required !== templateComp.validation?.required;
-                        // We do not check for ID mismatch anymore as we want to preserve unique IDs
-                        return needsPropertyUpdate;
-                    });
-                });
-                if (needsUpdate && onValueChange) {
-                    const updatedEntries = dataEntries.map(entry => {
-                        // Use index-based matching to ensure each template component maps to the correct entry component
-                        const updatedComponents = gridComponents.map((templateComp, componentIndex) => {
-                            // Find existing component by index first
-                            let existingComponent = entry.components?.[componentIndex];
-                            // If no component at this index, try to find by name+label (for backward compatibility)
-                            if (!existingComponent) {
-                                existingComponent = entry.components?.find((comp) => comp.name === templateComp.name &&
-                                    comp.basic?.label === templateComp.basic?.label);
-                            }
-                            // Always ensure a valid ID exists, but respect existing one if possible
-                            // const uniqueId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
-                            if (existingComponent) {
-                                // Update existing component with new template properties while ensuring unique ID and preserving form values
-                                const updatedComponent = {
-                                    ...templateComp,
-                                    id: existingComponent.id, // Preserve existing ID !!
-                                    basic: {
-                                        ...templateComp.basic,
-                                        showLabel: false, // Hide label in datagrid cells
-                                        // Preserve any user-entered values
-                                        value: existingComponent.basic?.value || templateComp.basic?.defaultValue || ''
-                                    }
-                                };
-                                return updatedComponent;
-                            }
-                            else {
-                                // Create new component based on template
-                                // Only for NEW components in existing entries (e.g. column added) do we generate a new ID
-                                const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
-                                const newId = `${templateComp.id}-${uniqueSuffix}-${componentIndex}`;
-                                const newComponent = {
-                                    ...templateComp,
-                                    id: newId,
-                                    basic: {
-                                        ...templateComp.basic,
-                                        showLabel: false // Hide label in datagrid cells
-                                    }
-                                };
-                                return newComponent;
-                            }
-                        });
-                        return {
-                            ...entry,
-                            components: updatedComponents
-                        };
-                    });
-                    const newValue = { ...properties, entries: updatedEntries };
-                    // Only call onValueChange if the data actually changed
-                    if (JSON.stringify(newValue) !== JSON.stringify(properties)) {
-                        onValueChange({
-                            id,
-                            value: newValue
-                        });
-                    }
-                }
-            }
         }
     }, [gridComponents, dataEntries, id, onValueChange, properties, mode, properties.templateComponents]);
     const handleDataGridClick = React.useCallback((event) => {
@@ -4933,9 +4847,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     // Handle component value change for form data updates (test mode)
     const handleComponentValueChange = React.useCallback((change) => {
         if (mode === 'test') {
-            // CRITICAL: Update localFormDataRef immediately so the value persists in the UI
-            // without waiting for the parent round-trip (which resets values for entry 2+)
-            localFormDataRef.current = { ...localFormDataRef.current, [change.id]: change.value };
+            // CRITICAL: Store value locally to prevent loss during parent round-trip
+            localFormValuesRef.current[change.id] = change.value;
             // Also propagate up to parent for persistence
             if (onValueChange) {
                 onValueChange({
@@ -5000,11 +4913,10 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     }, [properties, onValueChange, id, onEntryRemove]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = React.useCallback((field, hideLabel = false) => {
-        // CRITICAL: Use localFormDataRef (not formData prop) so values persist in entry 2+ immediately
-        // Also fall back to field.basic.value which is updated by DfFormPreview's updateComponentValue after round-trip
-        const effectiveFormData = { ...formData, ...localFormDataRef.current };
+        // CRITICAL: Use local values first, then fall back to formData prop, then defaults
+        // This ensures typed values in entry 2+ persist immediately
         const formValue = mode === 'test'
-            ? (effectiveFormData[field.id] ?? field.basic?.value ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : ''))
+            ? (localFormValuesRef.current[field.id] ?? formData[field.id] ?? field.basic?.value ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : ''))
             : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
         const commonProps = {
             id: field.id,
@@ -5062,7 +4974,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             default:
                 return jsxRuntime.jsxs("div", { className: "unknown-component", children: ["Unknown component: ", field.name] });
         }
-    }, [mode, handleComponentValueChange, formData]);
+    }, [mode, handleComponentValueChange]);
     const gridStyle = {
         backgroundColor: properties.styles.backgroundColor || 'var(--df-color-fb-container)',
         borderColor: properties.styles.borderColor || 'var(--df-color-fb-border)',