df-ae-forms-package 1.1.1 → 1.1.3

package/dist/index.js

@@ -4243,6 +4243,33 @@ const ComponentSubmissionActions = ({ component }) => {
     return (jsxRuntime.jsx("div", { className: "component-submission-actions", children: jsxRuntime.jsxs("div", { className: "actions-content", children: [hasNotes && (jsxRuntime.jsx("div", { className: "notes-summary-section", children: jsxRuntime.jsxs("div", { className: "notes-full-text", children: [jsxRuntime.jsx("span", { className: "notes-label", children: "Notes:" }), " ", notes] }) })), hasAttachments && (jsxRuntime.jsx("div", { className: "attachments-section", children: jsxRuntime.jsx(SubmissionAttachmentThumbnails, { attachments: attachments }) }))] }) }));
 };
 
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+function ensureStringId$2(id) {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId$2(id._id);
+        try {
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+}
 const DraggableGridComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const formValue = formData[component.id];
     const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
@@ -4494,7 +4521,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     let entryComponent = entry.components?.[componentIndex];
                                     if (!entryComponent) {
                                         // Use entry.id (which is unique) instead of entryIndex to prevent data collisions
-                                        const uniqueId = `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`;
+                                        const uniqueId = `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`;
                                         entryComponent = {
                                             ...templateComponent,
                                             id: uniqueId,
@@ -4507,7 +4534,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     else {
                                         entryComponent = {
                                             ...entryComponent,
-                                            id: entryComponent.id || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
+                                            id: ensureStringId$2(entryComponent.id) || `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                             basic: {
                                                 ...entryComponent.basic,
                                                 showLabel: columnView // Show label in column view
@@ -4566,7 +4593,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         position: 'sticky',
                         bottom: 0,
                         zIndex: 5
-                    }, 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: {
+                    }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            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',
@@ -4631,7 +4662,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                                     comp.basic?.label === templateComponent.basic?.label);
                             }
                             if (!entryComponent) {
-                                const uniqueId = `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`;
+                                const uniqueId = `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`;
                                 entryComponent = {
                                     ...templateComponent,
                                     id: uniqueId,
@@ -4644,7 +4675,7 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                             else {
                                 entryComponent = {
                                     ...entryComponent,
-                                    id: entryComponent.id || `${templateComponent.id || 'comp'}-${entry.id}-${componentIndex}`,
+                                    id: ensureStringId$2(entryComponent.id) || `${ensureStringId$2(templateComponent.id) || 'comp'}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                     basic: {
                                         ...entryComponent.basic,
                                         showLabel: columnView // Show label in column view, hide in grid view
@@ -4688,7 +4719,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     borderRadius: '8px',
                     display: 'flex',
                     justifyContent: 'center'
-                }, 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: {
+                }, children: jsxRuntime.jsxs("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        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,10 +4747,11 @@ 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 gridId = ensureStringId$2(id) || properties._id || (typeof id === 'string' ? id : 'datagrid-id');
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map((comp, index) => ({
         ...comp,
-        id: comp.id || `${id}-template-${index}`, // CRITICAL: Ensure template components have stable IDs
+        id: ensureStringId$2(comp.id) || `${gridId}-template-${index}`, // CRITICAL: Ensure template components have stable string IDs
         basic: {
             ...comp.basic,
             // Use an empty string instead of undefined to satisfy component typing
@@ -4729,7 +4765,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         gridComponents = dataEntries[0].components.map((comp, index) => ({
             ...comp,
             // Remove entry suffix for template, use stable ID if missing
-            id: comp.id?.replace(/-entry-.*$/, '') || `${id}-template-${index}`,
+            id: ensureStringId$2(comp.id).replace(/-entry-.*$/, '') || `${gridId}-template-${index}`,
             basic: {
                 ...comp.basic,
                 // Clear any data values while keeping types happy
@@ -4772,7 +4808,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     index: 0,
                     components: gridComponents.map((comp, componentIndex) => ({
                         ...comp,
-                        id: `${comp.id}-${newEntryId}-${componentIndex}`,
+                        id: `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`,
                         basic: {
                             ...comp.basic,
                             showLabel: false // Hide label in datagrid cells
@@ -4827,8 +4863,10 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                                 // Update existing component with new template properties while ensuring unique ID and preserving form values
                                 const updatedComponent = {
                                     ...templateComp,
-                                    // Preserve existing ID or generate one if missing
-                                    id: existingComponent.id || `${templateComp.id}-${entry.id}-${componentIndex}`,
+                                    // Preserve existing ID (ensure it's a string) or generate one if missing
+                                    id: (existingComponent.id && typeof existingComponent.id === 'string')
+                                        ? existingComponent.id
+                                        : `${ensureStringId$2(templateComp.id)}-${ensureStringId$2(entry.id)}-${componentIndex}`,
                                     basic: {
                                         ...templateComp.basic,
                                         showLabel: false, // Hide label in datagrid cells
@@ -4842,7 +4880,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                                 // 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 newId = `${ensureStringId$2(templateComp.id)}-${uniqueSuffix}-${componentIndex}`;
                                 const newComponent = {
                                     ...templateComp,
                                     id: newId,
@@ -4937,25 +4975,27 @@ 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] handleAddEntry called - Component ID:', id);
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length);
+        console.log('[DfFormDataGrid] current entries count:', currentEntries.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}`;
         const newEntry = {
             id: newEntryId,
-            index: properties.entries.length,
+            index: currentEntries.length,
             components: gridComponents.map((comp, componentIndex) => {
-                const componentId = `${comp.id}-${newEntryId}-${componentIndex}`;
+                const componentId = `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`;
                 return {
                     ...comp,
                     // Use the unique entry ID in the component ID to prevent collisions
                     id: componentId,
                     basic: {
                         ...comp.basic,
-                        value: '', // Explicitly clear value for new entries
+                        value: comp.basic?.defaultValue || '', // Use defaultValue if available, else empty
                         showLabel: false // Hide label in datagrid cells
                     }
                 };
@@ -4963,31 +5003,41 @@ 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];
+        const updatedEntries = [...currentEntries, newEntry];
         console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated entries');
+            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
-                id,
-                value: { ...properties, entries: updatedEntries }
+                id: gridId, // Use sanitized gridId
+                value: {
+                    ...properties,
+                    entries: updatedEntries
+                }
             });
+            // Notify parent if callback provided
+            if (onEntryAdd) {
+                console.log('[DfFormDataGrid] calling onEntryAdd callback');
+                onEntryAdd();
+            }
         }
         else {
-            console.log('[DfFormDataGrid] WARNING: onValueChange is not defined!');
+            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
         }
-        onEntryAdd?.();
-    }, [properties, onValueChange, id, onEntryAdd, gridComponents]);
+    }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = React.useCallback((entryIndex) => {
-        const updatedEntries = properties.entries
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        const updatedEntries = currentEntries
             .filter((_, index) => index !== entryIndex)
             .map((entry, index) => ({ ...entry, index })); // Only update index, preserve unique ID
         if (onValueChange) {
+            console.log('[DfFormDataGrid] Removing entry at index:', entryIndex, 'New count:', updatedEntries.length);
             onValueChange({
-                id,
+                id: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
             });
         }
-    }, [properties, onValueChange, id, onEntryRemove]);
+    }, [properties.entries, onValueChange, gridId, properties]);
     // 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 || '' : '');
@@ -5312,6 +5362,37 @@ const DfFormSection = ({ id, properties, mode = 'edit', formData = {}, onValueCh
 
 // Dynamic imports to avoid circular dependencies
 const DfFormTable$1 = React.lazy(() => Promise.resolve().then(function () { return dfFormTable; }));
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+// This is used globally in this file to prevent [object Object] corruption
+const ensureStringId$1 = (id) => {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        // If the ID is already corrupted, return empty to trigger regeneration
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId$1(id._id);
+        // Fallback for other object structures that might be IDs
+        try {
+            // If it has a toString that isn't the default, use it
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            // Otherwise, use a hash or just JSON
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+};
 // Normalize a table row from API format (object with numeric keys) into a proper array.
 // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
 const normalizeTableRow = (row) => {
@@ -5357,16 +5438,17 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     // Recursive function to initialize values from nested components
     const initializeComponentValues = (components, values) => {
         components.forEach(component => {
-            if (component.id) {
+            const componentId = ensureStringId$1(component.id);
+            if (componentId) {
                 // ALWAYS prioritize existing form state (values param) if it exists
-                if (values[component.id] !== undefined) ;
-                // Then check initialFormData (if we are merging it) - handled by caller usually, but safe to check
-                else if (component.basic && 'value' in component.basic && component.basic.value !== undefined && component.basic.value !== '' && component.basic.value !== null) {
-                    values[component.id] = component.basic.value;
+                if (values[componentId] !== undefined) ;
+                // Then use captured value in basic.value
+                else if (component.basic && 'value' in component.basic && component.basic.value !== undefined) {
+                    values[componentId] = component.basic.value;
                 }
-                // Then check defaultValue
-                else if (component.basic && 'defaultValue' in component.basic && component.basic.defaultValue !== undefined && component.basic.defaultValue !== '' && component.basic.defaultValue !== null) {
-                    values[component.id] = component.basic.defaultValue;
+                // Then use defaultValue
+                else if (component.basic && 'defaultValue' in component.basic && component.basic.defaultValue !== undefined) {
+                    values[componentId] = component.basic.defaultValue;
                 }
                 // Only then default to empty
                 else {
@@ -5436,12 +5518,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         // Helper to extract notes and attachments recursively
         const extractNotesAndAttachments = (components) => {
             components.forEach(comp => {
-                if (comp.id) {
+                const componentId = ensureStringId$1(comp.id);
+                if (componentId) {
                     if (comp.basic?.notes || comp.basic?.comments) {
-                        initialNotes[comp.id] = comp.basic?.notes || comp.basic?.comments;
+                        initialNotes[componentId] = comp.basic?.notes || comp.basic?.comments;
                     }
                     if (comp.basic?.attachments) {
-                        initialAttachments[comp.id] = comp.basic.attachments;
+                        initialAttachments[componentId] = comp.basic.attachments;
                     }
                 }
                 // Recurse
@@ -5463,27 +5546,43 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         };
         // Validate component IDs for uniqueness without mutating original props
         const getValidatedComponents = (components, parentId) => {
+            const parentIdStr = parentId ? ensureStringId$1(parentId) : '';
             return components.map((component, index) => {
                 let validatedComponent = { ...component };
-                // Ensure component has an ID
-                if (!validatedComponent.id || typeof validatedComponent.id !== 'string' || validatedComponent.id.trim() === '') {
+                // Ensure component has a valid string ID
+                let currentId = validatedComponent.id;
+                // CRITICAL: Reject any ID that is not a string, is empty, or contains "[object Object]"
+                let isIdValid = typeof currentId === 'string' &&
+                    currentId.trim() !== '' &&
+                    !currentId.includes('[object Object]');
+                if (!isIdValid) {
+                    // If it's an object ID (but not a corrupted string), convert it to string
+                    if (currentId && typeof currentId === 'object') {
+                        const convertedId = ensureStringId$1(currentId);
+                        if (convertedId && !convertedId.includes('[object Object]')) {
+                            validatedComponent.id = convertedId;
+                            isIdValid = true;
+                        }
+                    }
+                }
+                if (!isIdValid) {
                     // Determine a base name for the ID
                     const name = validatedComponent.name || 'component';
                     const label = validatedComponent.basic?.label || '';
                     const safeLabel = label.replace(/[^a-zA-Z0-9]/g, '').toLowerCase().substring(0, 10);
                     // Generate a stable unique ID if parentId is provided, otherwise fallback to semi-stable
-                    if (parentId) {
-                        validatedComponent.id = `${parentId}-${name}-${index}`;
+                    if (parentIdStr) {
+                        validatedComponent.id = `${parentIdStr}-${name}-${index}`;
                     }
                     else {
                         // For root components, use label if available for stability
                         const labelPart = safeLabel ? `-${safeLabel}` : '';
                         validatedComponent.id = `${name}${labelPart}-${index}`;
                     }
-                    console.warn(`[DfFormPreview] Assigned missing ID: ${validatedComponent.id}`);
+                    console.warn(`[DfFormPreview] Fixed missing/invalid ID: ${validatedComponent.id}`);
                 }
                 else {
-                    // Check for duplicates
+                    // ID is a valid string, check for duplicates
                     if (seenIds.has(validatedComponent.id)) {
                         console.error(`[DfFormPreview] Duplicate component ID detected: ${validatedComponent.id}`);
                         // Generate a unique ID for duplicate - using index to keep it somewhat stable
@@ -5503,7 +5602,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return normalizedRow.map((cell, cellIndex) => {
                                 if (cell && cell.components && Array.isArray(cell.components)) {
                                     // Stable ID for table cells: tableId-row-X-cell-Y
-                                    const cellContextId = `${validatedComponent.id}-row-${rowIndex}-cell-${cellIndex}`;
+                                    const cellContextId = `${ensureStringId$1(validatedComponent.id)}-row-${rowIndex}-cell-${cellIndex}`;
                                     return {
                                         ...cell,
                                         components: getValidatedComponents(cell.components, cellContextId)
@@ -5519,14 +5618,21 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     validatedComponent.entries = validatedComponent.entries.map((entry) => {
                         if (entry && entry.components && Array.isArray(entry.components)) {
                             // Stable ID for datagrid entries: datagridId-entryId or using entry.id
+                            const entryId = entry.id ? ensureStringId$1(entry.id) : `${ensureStringId$1(validatedComponent.id)}-entry-${entry.index}`;
                             return {
                                 ...entry,
-                                components: getValidatedComponents(entry.components, entry.id || `${validatedComponent.id}-entry-${entry.index}`)
+                                id: entryId, // Ensure entry itself has a string ID
+                                components: getValidatedComponents(entry.components, entryId)
                             };
                         }
                         return entry;
                     });
                 }
+                // CRITICAL: Also validate templateComponents for datagrids
+                if (validatedComponent.name === 'datagrid' && validatedComponent.templateComponents && Array.isArray(validatedComponent.templateComponents)) {
+                    const datagridId = ensureStringId$1(validatedComponent.id);
+                    validatedComponent.templateComponents = getValidatedComponents(validatedComponent.templateComponents, `${datagridId}-template`);
+                }
                 return validatedComponent;
             });
         };
@@ -5534,8 +5640,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         let validatedFormComponents = localFormComponents;
         if (localFormComponents && localFormComponents.length > 0) {
             validatedFormComponents = getValidatedComponents(localFormComponents);
-            // Notifying parent of changed components if they were mutated (IDs added/fixed)
+            // Synchronize local state if components were mutated (IDs added/fixed)
             if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
+                console.log('[DfFormPreview] Synchronizing local components after ID validation');
+                setLocalFormComponents(validatedFormComponents);
                 onFormDataChange?.(validatedFormComponents);
             }
         }
@@ -6314,13 +6422,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
     const componentIdCacheRef = React.useRef(new Map());
     const componentCounterRef = React.useRef(0);
     const renderFormComponent = (component) => {
-        // CRITICAL: Ensure component has a valid unique ID
+        // CRITICAL: Ensure component has a valid unique string ID
         // NEVER regenerate IDs - always use existing or cached ID
-        let finalComponentId;
-        if (component.id && typeof component.id === 'string' && component.id.trim() !== '') {
-            // Component already has an ID - use it (most common case)
-            finalComponentId = component.id;
-        }
+        let finalComponentId = ensureStringId$1(component.id);
+        if (finalComponentId && finalComponentId.trim() !== '') ;
         else {
             // Component is missing an ID - need to generate and cache it
             // Create a stable cache key using component properties that don't change
@@ -6450,12 +6555,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return renderFormComponent(field);
                         }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6477,12 +6583,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
                             // Handle attachment change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6507,12 +6614,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 return (jsxRuntime.jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
                         // Handle notes change for datagrid entry components
+                        const targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6535,12 +6643,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
                         // Handle attachment change for datagrid entry components
+                        const targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6561,13 +6670,16 @@ 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);
+                        const changeId = ensureStringId$1(change.id);
+                        const componentId = ensureStringId$1(component.id);
+                        console.log(`[DfFormPreview] datagrid onValueChange - Target: ${changeId}, Component: ${componentId}`);
                         // Handle datagrid value changes (entries updates)
-                        if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
+                        if (changeId === componentId && 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) {
+                                const currentCompId = ensureStringId$1(comp.id);
+                                if (currentCompId === componentId) {
                                     return {
                                         ...comp,
                                         ...change.value
@@ -6578,26 +6690,37 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // CRITICAL: Update local state immediately so new entries render without Angular round-trip
                             setLocalFormComponents(updatedComponents);
                             onFormDataChange?.(updatedComponents);
-                            // Also update formValues for nested components
+                            // Also update formValues for nested components to prevent undefined values
                             if (change.value.entries && Array.isArray(change.value.entries)) {
+                                const newValues = { ...formValues };
+                                let valuesChanged = false;
                                 change.value.entries.forEach((entry) => {
                                     if (entry.components && Array.isArray(entry.components)) {
                                         entry.components.forEach((nestedComp) => {
-                                            const nestedValue = formValues[nestedComp.id];
-                                            if (nestedValue !== undefined) ;
-                                            else {
-                                                // Initialize with defaultValue if available
+                                            const nestedId = ensureStringId$1(nestedComp.id);
+                                            if (!nestedId)
+                                                return;
+                                            if (newValues[nestedId] === undefined) {
+                                                // Initialize with defaultValue if available, otherwise empty string/array
                                                 const defaultValue = nestedComp.basic?.defaultValue;
                                                 if (defaultValue !== undefined) {
-                                                    setFormValues(prev => ({
-                                                        ...prev,
-                                                        [nestedComp.id]: defaultValue
-                                                    }));
+                                                    newValues[nestedId] = defaultValue;
+                                                }
+                                                else if (nestedComp.name === 'checkbox' || nestedComp.name === 'select') {
+                                                    newValues[nestedId] = [];
                                                 }
+                                                else {
+                                                    newValues[nestedId] = '';
+                                                }
+                                                valuesChanged = true;
                                             }
                                         });
                                     }
                                 });
+                                if (valuesChanged) {
+                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
+                                    setFormValues(newValues);
+                                }
                             }
                         }
                         else {
@@ -6806,6 +6929,32 @@ const DfFormComments = ({ comment = '', onSave, placeholder = 'Enter your reason
     return (jsxRuntime.jsxs("div", { className: `df-form-comments ${className}`, children: [jsxRuntime.jsxs("div", { className: "df-form-comments__header", children: [jsxRuntime.jsx("h3", { className: "df-form-comments__title", children: "Comments" }), jsxRuntime.jsx("button", { className: "df-form-comments__toggle", type: "button", onClick: toggleComments, "aria-expanded": isExpanded, "aria-label": "Toggle comments section", disabled: disabled, children: isExpanded ? (jsxRuntime.jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25BC" })) : (jsxRuntime.jsx("span", { className: "df-form-comments__toggle-icon", children: "\u25B6" })) })] }), jsxRuntime.jsx("div", { className: `df-form-comments__content ${isExpanded ? 'df-form-comments__content--expanded' : ''}`, children: jsxRuntime.jsx("div", { className: "df-form-comments__input-container", children: jsxRuntime.jsx("div", { className: "df-form-comments__input-line", children: jsxRuntime.jsx("input", { type: "text", id: "comment-input", className: "df-form-comments__input", value: currentComment, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled }) }) }) })] }));
 };
 
+// Helper to ensure an ID is a stable string, handling MongoDB-style object IDs
+const ensureStringId = (id) => {
+    if (!id)
+        return '';
+    if (typeof id === 'string') {
+        if (id.includes('[object Object]'))
+            return '';
+        return id;
+    }
+    if (typeof id === 'object' && id !== null) {
+        if (id.$oid)
+            return String(id.$oid);
+        if (id._id)
+            return ensureStringId(id._id);
+        try {
+            const str = id.toString();
+            if (str && str !== '[object Object]')
+                return str;
+            return JSON.stringify(id);
+        }
+        catch (e) {
+            return 'id-error';
+        }
+    }
+    return String(id);
+};
 // Normalize a row from the API format (object with numeric keys) into a proper TableCell array.
 // The API may return cells as [{"0": {cell}, "1": {cell}}, ...] instead of [[cell, cell], ...].
 const normalizeRow = (row) => {
@@ -7000,13 +7149,15 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
                 ? cell.components.map((comp, compIndex) => {
                     // CRITICAL: Only generate ID if it's missing - never regenerate existing IDs
                     // This prevents component remounting and losing input state
-                    if (comp.id && typeof comp.id === 'string' && comp.id.trim() !== '') {
-                        // ID already exists - keep it as is
-                        return comp;
+                    const existingId = ensureStringId(comp.id);
+                    if (existingId) {
+                        // ID already exists and is valid - keep it but ensure it's a string
+                        return { ...comp, id: existingId };
                     }
                     // Generate unique ID that includes table ID, row, cell, and component index
                     // This ensures no conflicts with other components
-                    const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
+                    const sanitizedTableId = ensureStringId(id);
+                    const uniqueId = `${comp.name || 'component'}-table-${sanitizedTableId}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
                     return {
                         ...comp,
                         id: uniqueId