df-ae-forms-package 1.0.92 → 1.0.94

package/dist/index.js

@@ -4566,7 +4566,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         position: 'sticky',
                         bottom: 0,
                         zIndex: 5
-                    }, children: jsxRuntime.jsxs("button", { onClick: onAddEntry, disabled: dataEntries.length >= maxEntries, style: {
+                    }, children: jsxRuntime.jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
                             backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                             color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4688,7 +4688,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     borderRadius: '8px',
                     display: 'flex',
                     justifyContent: 'center'
-                }, children: jsxRuntime.jsxs("button", { onClick: onAddEntry, disabled: dataEntries.length >= maxEntries, style: {
+                }, children: jsxRuntime.jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
                         backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                         color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4712,6 +4712,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] = React.useState(false);
     const hasInitialized = React.useRef(false);
+    const [localFormData, setLocalFormData] = React.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,
@@ -4926,8 +4927,10 @@ 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') {
-            // 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,
@@ -4938,6 +4941,10 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         // In edit/preview modes, don't handle value changes as components are read-only
     }, [mode, onValueChange]);
     const handleAddEntry = React.useCallback(() => {
+        console.log('[DfFormDataGrid] handleAddEntry called');
+        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length, gridComponents.map(c => c.id));
+        console.log('[DfFormDataGrid] current entries:', properties.entries?.length);
+        console.log('[DfFormDataGrid] onValueChange exists:', !!onValueChange);
         // Use timestamp and random string to ensure uniqueness even if entries are deleted
         const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
         const newEntryId = `entry-${uniqueSuffix}`;
@@ -4959,13 +4966,19 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             }),
             styles: {}
         };
+        console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
         const updatedEntries = [...properties.entries, newEntry];
+        console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
+            console.log('[DfFormDataGrid] calling onValueChange with updated entries');
             onValueChange({
                 id,
                 value: { ...properties, entries: updatedEntries }
             });
         }
+        else {
+            console.log('[DfFormDataGrid] WARNING: onValueChange is not defined!');
+        }
         onEntryAdd?.();
     }, [properties, onValueChange, id, onEntryAdd, gridComponents]);
     const handleRemoveEntry = React.useCallback((entryIndex) => {
@@ -4981,7 +4994,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 = React.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,
@@ -5038,7 +5053,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             default:
                 return jsxRuntime.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)',
@@ -6542,8 +6557,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         });
                         onFormDataChange?.(updatedComponents);
                     }, onValueChange: (change) => {
+                        console.log('[DfFormPreview] datagrid onValueChange received:', change.id, 'hasEntries:', change.value && typeof change.value === 'object' && 'entries' in change.value);
                         // Handle datagrid value changes (entries updates)
                         if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
+                            console.log('[DfFormPreview] datagrid entries update - entries count:', change.value.entries?.length);
                             // Update localFormComponents with new entries structure
                             const updatedComponents = localFormComponents.map(comp => {
                                 if (comp.id === component.id) {