df-ae-forms-package 1.0.94 → 1.0.95

package/dist/index.esm.js

@@ -4710,7 +4710,13 @@ 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);
+    // 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 = useRef({ ...formData });
+    // Keep ref in sync with formData prop (parent updates), but never overwrite user-typed values
+    useEffect(() => {
+        localFormDataRef.current = { ...formData, ...localFormDataRef.current };
+    }, [formData]);
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map(comp => ({
         ...comp,
@@ -4925,9 +4931,9 @@ 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') {
-            // CRITICAL: Update local formData immediately so the value persists in the UI
+            // CRITICAL: Update localFormDataRef 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 }));
+            localFormDataRef.current = { ...localFormDataRef.current, [change.id]: change.value };
             // Also propagate up to parent for persistence
             if (onValueChange) {
                 onValueChange({
@@ -4992,9 +4998,12 @@ 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) => {
-        // 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 || '' : '');
+        // 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 };
+        const formValue = mode === 'test'
+            ? (effectiveFormData[field.id] ?? field.basic?.value ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : ''))
+            : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
         const commonProps = {
             id: field.id,
             properties: field,
@@ -5051,7 +5060,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             default:
                 return jsxs("div", { className: "unknown-component", children: ["Unknown component: ", field.name] });
         }
-    }, [mode, handleComponentValueChange, formData, localFormData]);
+    }, [mode, handleComponentValueChange, formData]);
     const gridStyle = {
         backgroundColor: properties.styles.backgroundColor || 'var(--df-color-fb-container)',
         borderColor: properties.styles.borderColor || 'var(--df-color-fb-border)',