df-ae-forms-package 1.0.93 → 1.0.94

package/dist/index.esm.js

@@ -4710,6 +4710,7 @@ 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] = useState(false);
     const hasInitialized = useRef(false);
+    const [localFormData, setLocalFormData] = useState(formData);
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map(comp => ({
         ...comp,
@@ -4924,8 +4925,10 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     // Handle component value change for form data updates (test mode)
     const handleComponentValueChange = useCallback((change) => {
         if (mode === 'test') {
-            // In test mode, update form data through the parent's onValueChange
-            // This allows the form data to be updated for interactive components
+            // CRITICAL: Update local formData immediately so the value persists in the UI
+            // without waiting for the parent round-trip (which resets values for entry 2+)
+            setLocalFormData(prev => ({ ...prev, [change.id]: change.value }));
+            // Also propagate up to parent for persistence
             if (onValueChange) {
                 onValueChange({
                     id: change.id,
@@ -4989,7 +4992,9 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     }, [properties, onValueChange, id, onEntryRemove]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = useCallback((field, hideLabel = false) => {
-        const formValue = mode === 'test' ? (formData[field.id] || ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
+        // CRITICAL: Use localFormData (not formData prop) so values persist in entry 2+ immediately
+        const effectiveFormData = { ...formData, ...localFormData };
+        const formValue = mode === 'test' ? (effectiveFormData[field.id] ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
         const commonProps = {
             id: field.id,
             properties: field,
@@ -5046,7 +5051,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             default:
                 return jsxs("div", { className: "unknown-component", children: ["Unknown component: ", field.name] });
         }
-    }, [mode, handleComponentValueChange]);
+    }, [mode, handleComponentValueChange, formData, localFormData]);
     const gridStyle = {
         backgroundColor: properties.styles.backgroundColor || 'var(--df-color-fb-container)',
         borderColor: properties.styles.borderColor || 'var(--df-color-fb-border)',