n8n-nodes-extended-forms 0.2.6 → 0.3.0

package/dist/nodes/Form123/templates/form-trigger.handlebars

@@ -314,48 +314,48 @@
 				min-width: var(--checkbox-size);
 			}
 
-			input[type='checkbox'] {
-				appearance: none;
-				width: var(--checkbox-size);
-				height: var(--checkbox-size);
-				border: 1px solid var(--color-input-border);
-				border-radius: 3px;
-				cursor: pointer;
-				position: relative;
-			}
-			.multiselect-checkbox:checked {
-				background: var(--color-focus-border);
-				border-color: var(--color-focus-border);
-			}
-			.multiselect-checkbox:checked::after {
-				content: '✔';
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				color: white;
-				font-size: var(--font-size-label);
-				font-weight: bold;
-			}
-
-			.multiselect[data-radio-select] .multiselect-checkbox {
-				border-radius: 50%;
-				width: var(--checkbox-size);
-				height: var(--checkbox-size);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.multiselect[data-radio-select] .multiselect-checkbox:checked {
-				background: white;
-				border-color: var(--color-focus-border);
-				border-width: 4px;
-				border-radius: 50%;
-			}
-			.multiselect[data-radio-select] .multiselect-checkbox:checked::after {
-				content: '';
-			}
+		input[type='checkbox'],
+		input[type='radio'] {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			width: var(--checkbox-size);
+			height: var(--checkbox-size);
+			border: 1px solid var(--color-input-border);
+			border-radius: 3px;
+			cursor: pointer;
+			position: relative;
+		}
+		
+		input[type='checkbox']:checked {
+			background: var(--color-focus-border);
+			border-color: var(--color-focus-border);
+		}
+		input[type='checkbox']:checked::after {
+			content: '✔';
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			color: white;
+			font-size: var(--font-size-label);
+			font-weight: bold;
+		}
+
+		/* Radio button specific styles */
+		input[type='radio'] {
+			border-radius: 50%;
+		}
+
+		input[type='radio']:checked {
+			background: white;
+			border-color: var(--color-focus-border);
+			border-width: 4px;
+		}
+		
+		input[type='radio']:checked::after {
+			content: '';
+		}
 
 			/* searchable dropdown ----------------------------- */
 			.searchable-dropdown {
@@ -665,6 +665,7 @@
 									<div
 									  class='multiselect {{inputRequired}}'
 										id='{{id}}'
+										data-field-name='{{label}}'
 										{{#if radioSelect}}
 											data-radio-select='{{radioSelect}}'
 										{{/if}}
@@ -680,7 +681,14 @@
 									>
 										{{#each multiSelectOptions}}
 											<div class='multiselect-option'>
-												<input type='checkbox' class='multiselect-checkbox' id='{{id}}' value='{{label}}' />
+												<input 
+													type='{{#if ../radioSelect}}radio{{else}}checkbox{{/if}}' 
+													class='multiselect-checkbox' 
+													id='{{id}}' 
+													name='{{#if ../radioSelect}}{{../id}}{{else}}{{id}}{{/if}}'
+													value='{{label}}' 
+													data-field-name='{{../label}}'
+												/>
 												<label for='{{id}}'>{{label}}</label>
 											</div>
 										{{/each}}
@@ -695,7 +703,7 @@
 							<div class='form-group {{#if showWhen}}input--hide{{/if}}' {{#if showWhen}}data-trigger-field='{{showWhen.fieldId}}' data-trigger-values='{{json showWhen.values}}'{{/if}}>
 								<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
 								<div class='select-input'>
-									<select id='{{id}}' name='{{id}}' class='{{inputRequired}}'>
+									<select id='{{id}}' name='{{id}}' class='{{inputRequired}}' data-field-name='{{label}}'>
 										<option value='' disabled selected>Select an option ...</option>
 										{{#each selectOptions}}
 											<option value='{{this}}'>{{this}}</option>
@@ -711,7 +719,7 @@
 						{{#if isSearchableDropdown}}
 							<div class='form-group {{#if showWhen}}input--hide{{/if}}' {{#if showWhen}}data-trigger-field='{{showWhen.fieldId}}' data-trigger-values='{{json showWhen.values}}'{{/if}}>
 								<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-								<div class='searchable-dropdown searchable-dropdown-single {{inputRequired}}' id='{{id}}' data-field-id='{{id}}' data-single-select='true'>
+								<div class='searchable-dropdown searchable-dropdown-single {{inputRequired}}' id='{{id}}' data-field-id='{{id}}' data-field-name='{{label}}' data-single-select='true'>
 									<div class='searchable-dropdown-input-wrapper'>
 										<input 
 											type='text' 
@@ -741,7 +749,7 @@
 						{{#if isSearchableMultiselect}}
 							<div class='form-group {{#if showWhen}}input--hide{{/if}}' {{#if showWhen}}data-trigger-field='{{showWhen.fieldId}}' data-trigger-values='{{json showWhen.values}}'{{/if}}>
 								<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
-								<div class='searchable-dropdown searchable-dropdown-multi {{inputRequired}}' id='{{id}}' data-field-id='{{id}}' data-single-select='false'>
+								<div class='searchable-dropdown searchable-dropdown-multi {{inputRequired}}' id='{{id}}' data-field-id='{{id}}' data-field-name='{{label}}' data-single-select='false'>
 									<div class='searchable-dropdown-input-wrapper'>
 										<input 
 											type='text' 
@@ -790,6 +798,7 @@
 										class='form-input {{inputRequired}}'
 										id='{{id}}'
 										name='{{id}}'
+										data-field-name='{{label}}'
 										placeholder="{{placeholder}}"
 									>{{defaultValue}}</textarea>
 									<p class='{{errorId}} error-hidden'>
@@ -826,6 +835,7 @@
 										type='{{type}}'
 										id='{{id}}'
 										name='{{id}}'
+										data-field-name='{{label}}'
 										value="{{defaultValue}}"
 										placeholder="{{placeholder}}"
 									/>
@@ -1182,15 +1192,43 @@
 				const errorElement = document.querySelector(`.error-${fieldId}`);
 				const isSingleSelect = dropdown.dataset.singleSelect === 'true';
 				
-				let selectedValues = isSingleSelect ? null : [];
+				// Initialize selectedValues from hiddenInput (includes prefilled data)
+				let selectedValues = null;
 				let selectedValue = null;
 				let isClicking = false; // Flag to prevent focus handler from interfering
 
-				// Initialize with default value for single-select
-				if (isSingleSelect && hiddenInput.value) {
-					selectedValue = hiddenInput.value;
-					searchInput.value = selectedValue;
+				// Initialize with default value
+				if (isSingleSelect) {
+					if (hiddenInput.value) {
+						selectedValue = hiddenInput.value;
+						searchInput.value = selectedValue;
+						
+					}
+				} else {
+					// For multiselect, initialize from hidden input (preserves prefilled values)
+					try {
+						selectedValues = JSON.parse(hiddenInput.value || '[]');
+						
+					} catch (e) {
+						selectedValues = [];
+						
+					}
 				}
+				
+				// Listen for prefill events to update internal variables after initialization
+				dropdown.addEventListener('prefill-values', (e) => {
+					if (!isSingleSelect) {
+						selectedValues = e.detail.values || [];
+						
+					}
+				});
+				
+				dropdown.addEventListener('prefill-single-value', (e) => {
+					if (isSingleSelect) {
+						selectedValue = e.detail.value || '';
+						
+					}
+				});
 
 				// Toggle dropdown menu
 				inputWrapper.addEventListener('mousedown', (e) => {
@@ -1208,10 +1246,30 @@
 						// User can type to search, then select an option
 						if (isSingleSelect) {
 							searchInput.value = '';
-							// Show all options when opening
+							let selectedOption = null;
+							// Show all options and re-highlight the selected one
 							options.forEach((option) => {
 								option.classList.remove('hidden');
+								// Re-highlight the currently selected option
+								if (selectedValue && option.dataset.value === selectedValue) {
+									option.classList.add('selected');
+									selectedOption = option;
+									
+								} else {
+									option.classList.remove('selected');
+								}
 							});
+							
+							// Scroll to the selected option
+							if (selectedOption) {
+								setTimeout(() => {
+									selectedOption.scrollIntoView({ 
+										block: 'nearest',
+										behavior: 'smooth' 
+									});
+									
+								}, 20);
+							}
 						} else {
 							searchInput.value = '';
 						}
@@ -1256,10 +1314,28 @@
 							if (selectedValue && searchInput.value === selectedValue) {
 								searchInput.value = '';
 							}
-							// Show all options
+							let selectedOption = null;
+							// Show all options and re-highlight the selected one
 							options.forEach((option) => {
 								option.classList.remove('hidden');
+								// Re-highlight the currently selected option
+								if (selectedValue && option.dataset.value === selectedValue) {
+									option.classList.add('selected');
+									selectedOption = option;
+								} else {
+									option.classList.remove('selected');
+								}
 							});
+							
+							// Scroll to the selected option
+							if (selectedOption) {
+								setTimeout(() => {
+									selectedOption.scrollIntoView({ 
+										block: 'nearest',
+										behavior: 'smooth' 
+									});
+								}, 20);
+							}
 						}
 					});
 				}
@@ -1275,21 +1351,32 @@
 
 					option.addEventListener('click', (e) => {
 						if (isSingleSelect) {
-							// Single-select: select one value, show in input, close menu
-							selectedValue = value;
-							searchInput.value = value;
-							hiddenInput.value = value;
+							// Single-select: if clicking already selected option, clear it; otherwise select it
+							if (selectedValue === value) {
+								// Unselect: clear everything
+								
+								selectedValue = '';
+								searchInput.value = '';
+								hiddenInput.value = '';
+								options.forEach((opt) => opt.classList.remove('selected'));
+							} else {
+								// Select new value
+								
+								selectedValue = value;
+								searchInput.value = value;
+								hiddenInput.value = value;
+								
+								// Highlight selected option
+								options.forEach((opt) => {
+									opt.classList.remove('selected');
+									if (opt.dataset.value === value) {
+										opt.classList.add('selected');
+									}
+								});
+							}
+							
 							menu.style.display = 'none';
 							searchInput.blur(); // Remove focus
-							
-							// Highlight selected option
-							options.forEach((opt) => {
-								opt.classList.remove('selected');
-								if (opt.dataset.value === value) {
-									opt.classList.add('selected');
-								}
-							});
-							
 							validateSearchableDropdown();
 						} else {
 							// Multiselect: toggle checkbox, show tags
@@ -1298,12 +1385,19 @@
 								checkbox.checked = !checkbox.checked;
 							}
 
+							
+							
+
 							if (checkbox.checked) {
 								if (!selectedValues.includes(value)) {
 									selectedValues.push(value);
+									
 									addTag(value);
+								} else {
+									
 								}
 							} else {
+								
 								removeValue(value);
 							}
 
@@ -1350,7 +1444,9 @@
 				}
 
 				function updateHiddenInput() {
+					
 					hiddenInput.value = JSON.stringify(selectedValues);
+					
 				}
 
 				function validateSearchableDropdown() {
@@ -1382,8 +1478,21 @@
 
 			// Close all dropdowns when clicking outside
 			document.addEventListener('click', () => {
-				document.querySelectorAll('.searchable-dropdown-menu').forEach((menu) => {
-					menu.style.display = 'none';
+				document.querySelectorAll('.searchable-dropdown').forEach((dropdown) => {
+					const menu = dropdown.querySelector('.searchable-dropdown-menu');
+					const searchInput = dropdown.querySelector('.searchable-dropdown-search');
+					const hiddenInput = dropdown.querySelector('.searchable-dropdown-value');
+					const isSingleSelect = dropdown.dataset.singleSelect === 'true';
+					
+					if (menu.style.display === 'block') {
+						menu.style.display = 'none';
+						
+						// For single-select: restore the selected value display when closing
+						if (isSingleSelect && hiddenInput.value) {
+							searchInput.value = hiddenInput.value;
+							
+						}
+					}
 				});
 			});
 
@@ -1476,11 +1585,26 @@
 					interval = Math.round(interval * 1.1);
 					timeoutId = setTimeout(checkExecutionStatus, interval);
 				} catch (error) {
-					console.error("Error fetching data:", error);
+					
 				}
 			};
+            form.addEventListener('focusout', (e) => {
+                // Validate field when user leaves it
+                e.preventDefault();
+                
+                const progressQueryParam = '{{progressQueryParam}}' || 'token';
+                const progressId = new URLSearchParams(window.location.search).get(progressQueryParam);
+                const saveProgressWebhookUrl = '{{saveProgressWebhookUrl}}';
+                const loadProgressWebhookUrl = '{{loadProgressWebhookUrl}}';
+                
+                
+                
+                
+                
+            });
 
 			form.addEventListener('submit', (e) => {
+                
 				const valid = [];
 				e.preventDefault();
 
@@ -1560,6 +1684,11 @@
 					var formData = new FormData();
 
 					for (const filed of form.elements) {
+						// Skip radio buttons and checkboxes inside .multiselect (they're handled separately)
+						if (filed.type === 'radio' || (filed.type === 'checkbox' && filed.closest('.multiselect'))) {
+							continue; // Will be handled below
+						}
+						
 						if(filed.type !== 'file') {
 							formData.append(filed.name, filed.value);
 						} else {
@@ -1571,7 +1700,18 @@
 							}
 						}
 					}
-					document.querySelectorAll('.multiselect').forEach((multiselect) => {
+					
+				// Handle radio buttons: wrap in array and stringify (backend expects JSON)
+				document.querySelectorAll('.multiselect[data-radio-select="radio"]').forEach((radioGroup) => {
+					const checkedRadio = radioGroup.querySelector('input[type="radio"]:checked');
+					if (checkedRadio) {
+						// Backend expects JSON array, extracts first element
+						formData.append(radioGroup.id, JSON.stringify([checkedRadio.value]));
+					}
+				});
+					
+					// Handle checkboxes: append as JSON array
+					document.querySelectorAll('.multiselect:not([data-radio-select])').forEach((multiselect) => {
  						const selectedValues = getSelectedValues(multiselect);
  						formData.append(multiselect.id, JSON.stringify(selectedValues));
  					});
@@ -1655,7 +1795,7 @@
 							return;
 						})
 						.catch(function (error) {
-							console.error('Error:', error);
+							
 						})
 						.finally(() => {
 							if (window.location.href.includes('form-waiting')) {
@@ -1665,6 +1805,489 @@
 						});
 				}
 			});
+
+			// ========== AUTO-SAVE FUNCTIONALITY ==========
+			{{#if enableProgressSaving}}
+			(function() {
+				const progressQueryParam = '{{progressQueryParam}}' || 'token';
+				const progressId = new URLSearchParams(window.location.search).get(progressQueryParam);
+				const saveProgressWebhookUrl = '{{saveProgressWebhookUrl}}';
+				const loadProgressWebhookUrl = '{{loadProgressWebhookUrl}}';
+				
+				if (!progressId || !saveProgressWebhookUrl || !loadProgressWebhookUrl) {
+					return; // Exit if no progress ID or webhook URLs
+				}
+				
+				let savingFields = new Set();
+				
+				/**
+				 * Get field value by field element
+				 */
+				function getFieldValue(field) {
+					if (field.type === 'checkbox' || field.type === 'radio') {
+						return field.checked ? field.value : null;
+					}
+					if (field.tagName === 'SELECT') {
+						return field.value;
+					}
+					if (field.tagName === 'TEXTAREA' || field.tagName === 'INPUT') {
+						return field.value;
+					}
+					return null;
+				}
+				
+				/**
+				 * Get field name from element
+				 */
+				function getFieldName(field) {
+					// First try to get from data attribute
+					if (field.dataset.fieldName) {
+						return field.dataset.fieldName;
+					}
+					// For multiselect and searchable dropdowns, check parent
+					if (field.closest) {
+						const parent = field.closest('.multiselect, .searchable-dropdown');
+						if (parent && parent.dataset.fieldName) {
+							return parent.dataset.fieldName;
+						}
+					}
+					// Fallback to label text or field name
+					const formGroup = field.closest('.form-group');
+					if (formGroup) {
+						const label = formGroup.querySelector('label');
+						if (label) {
+							return label.textContent.trim().replace(' *', '');
+						}
+					}
+					return field.name || field.id;
+				}
+				
+				/**
+				 * Save individual field update
+				 */
+				function saveFieldUpdate(fieldName, value) {
+					if (savingFields.has(fieldName)) {
+						return; // Already saving this field
+					}
+					
+					savingFields.add(fieldName);
+					
+					// If value is already a JSON string, parse it back to avoid double encoding
+					let finalValue = value;
+					if (typeof value === 'string' && (value.startsWith('[') || value.startsWith('{'))) {
+						try {
+							finalValue = JSON.parse(value);
+						} catch (e) {
+							// If parsing fails, use the original value
+							finalValue = value;
+						}
+					}
+					
+					const payload = {
+						[progressQueryParam]: progressId,
+						fieldName: fieldName,
+						value: finalValue
+					};
+					
+					
+					
+					fetch(saveProgressWebhookUrl, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+						},
+						body: JSON.stringify(payload),
+					})
+					.then(response => {
+						if (!response.ok) {
+							throw new Error('Save failed');
+						}
+						return response.json();
+					})
+					.catch(error => {
+						
+						// Silently fail - don't interrupt user
+					})
+					.finally(() => {
+						savingFields.delete(fieldName);
+					});
+				}
+				
+				/**
+				 * Handle field change - save individual field update
+				 */
+				function handleFieldChange(event) {
+                    
+					const field = event.target;
+					const fieldName = getFieldName(field);
+					
+					if (!fieldName) return;
+					
+					// Skip file inputs
+					if (field.type === 'file') return;
+					
+					let value = getFieldValue(field);
+					
+					// Handle multiselect fields
+					if (field.closest('.multiselect')) {
+						const multiselect = field.closest('.multiselect');
+						value = getSelectedValues(multiselect);
+					}
+					
+					// Handle searchable dropdowns
+					if (field.closest('.searchable-dropdown')) {
+						const dropdown = field.closest('.searchable-dropdown');
+						const hiddenInput = dropdown.querySelector('.searchable-dropdown-value');
+						if (hiddenInput) {
+							const isSingleSelect = dropdown.dataset.singleSelect === 'true';
+							if (isSingleSelect) {
+								value = hiddenInput.value;
+							} else {
+								try {
+									value = JSON.parse(hiddenInput.value || '[]');
+								} catch (e) {
+									value = [];
+								}
+							}
+						}
+					}
+					
+					// Save the field update
+					saveFieldUpdate(fieldName, value);
+				}
+				
+				/**
+				 * Load saved progress on page load
+				 */
+				async function loadSavedProgress() {
+                    
+					try {
+						const response = await fetch(`${loadProgressWebhookUrl}?${progressQueryParam}=${encodeURIComponent(progressId)}`);
+						
+						// Handle 404: No saved data found (this is normal for new forms)
+						if (response.status === 404) {
+							
+							return;
+						}
+						
+						// Handle other errors
+						if (!response.ok) {
+							
+							return;
+						}
+						
+						const result = await response.json();
+						// Expect response format: { fieldId: value, ... } or { formData: { fieldId: value, ... } }
+						const savedData = result.formData || result;
+						
+						if (!savedData || Object.keys(savedData).length === 0) {
+							
+							return;
+						}
+						
+						
+						
+						// Prefill form fields
+						const form = document.querySelector('#n8n-form');
+						if (!form) return;
+
+                        
+						
+						Object.entries(savedData).forEach(([fieldName, value]) => {
+                            
+							// Skip non-field keys like token, id, createdAt, etc
+							if (['token', 'id', 'createdAt', 'updatedAt'].includes(fieldName)) {
+								return;
+							}
+							
+							// Parse stringified JSON values
+							let parsedValue = value;
+							if (typeof value === 'string' && (value.startsWith('[') || value.startsWith('{'))) {
+								try {
+									parsedValue = JSON.parse(value);
+									
+								} catch (e) {
+									parsedValue = value;
+								}
+							}
+							
+							// Handle radio buttons - query ALL radios with this field name
+							const radioButtons = form.querySelectorAll(`input[type="radio"][data-field-name="${fieldName}"]`);
+							if (radioButtons.length > 0) {
+								// Radio values should be simple strings, but handle arrays for backward compatibility
+								let radioValue = Array.isArray(parsedValue) ? parsedValue[0] : parsedValue;
+								
+								radioButtons.forEach(radio => {
+									radio.checked = radio.value === radioValue;
+									
+								});
+								return; // Done with this field
+							}
+							
+						// Handle checkboxes - query ALL checkboxes with this field name
+						const checkboxes = form.querySelectorAll(`input[type="checkbox"][data-field-name="${fieldName}"]`);
+						if (checkboxes.length > 0) {
+							// Checkboxes can have multiple values - filter out null/undefined
+							const checkValues = Array.isArray(parsedValue) 
+								? parsedValue.filter(v => v != null) 
+								: (parsedValue != null ? [parsedValue] : []);
+							
+							checkboxes.forEach(checkbox => {
+								checkbox.checked = checkValues.includes(checkbox.value);
+								
+							});
+							return; // Done with this field
+						}
+							
+							// Handle regular inputs and textareas by data-field-name
+							const field = form.querySelector(`[data-field-name="${fieldName}"]`);
+							if (field) {
+								if (field.tagName === 'SELECT') {
+									field.value = parsedValue;
+								} else if (field.tagName === 'TEXTAREA' || field.tagName === 'INPUT') {
+									field.value = parsedValue;
+								}
+							}
+							
+						// Handle multiselect fields
+						const multiselect = form.querySelector(`.multiselect[data-field-name="${fieldName}"]`);
+						if (multiselect) {
+							const checkboxes = multiselect.querySelectorAll('.multiselect-checkbox');
+							// Filter out null/undefined values
+							const valueArray = Array.isArray(value) 
+								? value.filter(v => v != null) 
+								: (value != null ? [value] : []);
+							checkboxes.forEach(checkbox => {
+								checkbox.checked = valueArray.includes(checkbox.value);
+							});
+						}
+							
+							// Handle searchable dropdowns
+							const dropdown = form.querySelector(`.searchable-dropdown[data-field-name="${fieldName}"]`);
+							if (dropdown) {
+								
+								const hiddenInput = dropdown.querySelector('.searchable-dropdown-value');
+								if (hiddenInput) {
+									const isSingleSelect = dropdown.dataset.singleSelect === 'true';
+									if (isSingleSelect) {
+										hiddenInput.value = String(value);
+										
+										// Update visible input
+										const searchInput = dropdown.querySelector('.searchable-dropdown-search');
+										if (searchInput) {
+											searchInput.value = String(value);
+											
+										}
+										
+										// CRITICAL: Update the dropdown's internal selectedValue variable
+										// Trigger a custom event that the dropdown can listen to
+										dropdown.dispatchEvent(new CustomEvent('prefill-single-value', { 
+											detail: { value: String(value) } 
+										}));
+								} else {
+									// Multiselect searchable dropdown
+									let valueArray = Array.isArray(value) ? value : (typeof value === 'string' && value.startsWith('[') ? JSON.parse(value) : [value]);
+									// Filter out null/undefined values
+									valueArray = valueArray.filter(v => v != null);
+									
+									hiddenInput.value = JSON.stringify(valueArray);
+									
+									// CRITICAL: Update the dropdown's internal selectedValues array
+									// We need to access the closure variable that was created during dropdown initialization
+									// Trigger a custom event that the dropdown can listen to
+									dropdown.dispatchEvent(new CustomEvent('prefill-values', { 
+										detail: { values: valueArray } 
+									}));
+										
+										// Clear existing selected tags - CORRECT CLASS NAME
+										const selectedContainer = dropdown.querySelector('.searchable-dropdown-selected');
+										if (selectedContainer) {
+											selectedContainer.innerHTML = '';
+											
+										} else {
+											
+										}
+										
+										// Check the checkboxes and add tags for selected values
+										const checkboxes = dropdown.querySelectorAll('.searchable-dropdown-checkbox');
+										const options = dropdown.querySelectorAll('.searchable-dropdown-option');
+										
+										
+										options.forEach((option, index) => {
+											const optionValue = option.dataset.value;
+											const checkbox = checkboxes[index];
+											if (checkbox && valueArray.includes(optionValue)) {
+												checkbox.checked = true;
+												
+												
+												// Add tag to selected container
+												if (selectedContainer) {
+													const tag = document.createElement('div');
+													tag.className = 'searchable-dropdown-tag';
+													tag.dataset.value = optionValue;
+													tag.innerHTML = `
+														<span>${optionValue}</span>
+														<span class="searchable-dropdown-tag-remove">&times;</span>
+													`;
+													
+													// Attach remove handler
+													const removeBtn = tag.querySelector('.searchable-dropdown-tag-remove');
+													if (removeBtn) {
+														removeBtn.addEventListener('click', (e) => {
+															e.stopPropagation();
+															// Remove from valueArray
+															const currentValue = JSON.parse(hiddenInput.value || '[]');
+															const newArray = currentValue.filter(v => v !== optionValue);
+															// Update hidden input
+															hiddenInput.value = JSON.stringify(newArray);
+															// Uncheck checkbox
+															checkbox.checked = false;
+															// Remove tag
+															tag.remove();
+															
+														});
+													}
+													
+													selectedContainer.appendChild(tag);
+													
+												}
+											}
+										});
+										
+									}
+								}
+							}
+						});
+					} catch (error) {
+						
+						
+						// Don't show error to user - just proceed with empty form
+					}
+				}
+				
+				// Initialize when DOM is ready
+				document.addEventListener('DOMContentLoaded', () => {
+                    
+					const form = document.querySelector('#n8n-form');
+					if (!form) return;
+					
+					// Wait for searchable dropdowns and multiselects to initialize, then load saved data
+					setTimeout(() => {
+						loadSavedProgress();
+					}, 100);
+					
+					// Attach focusout listener only for regular inputs/textareas
+					form.addEventListener('focusout', (e) => {
+						const field = e.target;
+						// Only handle text inputs, textareas, email, number, date - not dropdowns
+						if (field.tagName === 'INPUT' && ['text', 'email', 'number', 'date'].includes(field.type)) {
+							handleFieldChange(e);
+						} else if (field.tagName === 'TEXTAREA') {
+							handleFieldChange(e);
+						}
+					});
+					
+					// Handle radio button changes
+					document.querySelectorAll('input[type="radio"]').forEach(radio => {
+						radio.addEventListener('change', (e) => {
+							if (e.target.checked) {
+								const fieldName = getFieldName(e.target);
+								const value = e.target.value;
+								
+								
+								
+								if (fieldName) {
+									
+									saveFieldUpdate(fieldName, value);
+								}
+							}
+						});
+					});
+					
+					// Handle checkbox changes
+					document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+						// Skip checkboxes inside multiselect/searchable-dropdown (they're handled separately)
+						if (!checkbox.closest('.multiselect') && !checkbox.closest('.searchable-dropdown')) {
+							checkbox.addEventListener('change', (e) => {
+								const fieldName = getFieldName(e.target);
+								const value = e.target.checked;
+								if (fieldName) {
+									
+									saveFieldUpdate(fieldName, value);
+								}
+							});
+						}
+					});
+					
+					// Handle multiselect changes
+					document.querySelectorAll('.multiselect').forEach(multiselect => {
+						multiselect.addEventListener('change', (e) => {
+							const fieldName = getFieldName(multiselect);
+							const value = getSelectedValues(multiselect);
+							if (fieldName) {
+								saveFieldUpdate(fieldName, value);
+							}
+						});
+					});
+					
+					// Handle searchable dropdown changes - poll for value changes
+					const dropdownStates = new Map();
+					document.querySelectorAll('.searchable-dropdown').forEach(dropdown => {
+						const fieldName = getFieldName(dropdown);
+						const hiddenInput = dropdown.querySelector('.searchable-dropdown-value');
+						const isSingleSelect = dropdown.dataset.singleSelect === 'true';
+						
+						if (hiddenInput && fieldName) {
+							// Store initial value
+							dropdownStates.set(fieldName, hiddenInput.value);
+							
+							// Poll for changes every 300ms
+							setInterval(() => {
+								const currentValue = hiddenInput.value;
+								const previousValue = dropdownStates.get(fieldName);
+								
+								if (currentValue !== previousValue) {
+									
+									
+									
+									dropdownStates.set(fieldName, currentValue);
+									
+								let value;
+								if (isSingleSelect) {
+									value = currentValue;
+								} else {
+									try {
+										value = JSON.parse(currentValue || '[]');
+										// Filter out null/undefined values from multiselect arrays
+										value = value.filter(v => v != null);
+										
+									} catch (e) {
+										value = [];
+										
+									}
+								}
+								
+								// ALWAYS save, even empty values (they represent cleared fields)
+								
+								saveFieldUpdate(fieldName, value);
+								}
+							}, 300);
+						}
+					});
+					
+					// Handle regular select dropdowns
+					document.querySelectorAll('select').forEach(select => {
+						select.addEventListener('change', (e) => {
+							const fieldName = getFieldName(select);
+							if (fieldName) {
+								saveFieldUpdate(fieldName, select.value);
+							}
+						});
+					});
+				});
+			})();
+			{{/if}}
+			// ========== END AUTO-SAVE FUNCTIONALITY ==========
 		</script>
 	</body>
 </html>