form-builder-pro 1.2.5 → 1.2.7

package/dist/index.js

@@ -4615,6 +4615,8 @@ function fieldToPayload(field) {
     payload.css = field.css;
   if (field.optionSource !== void 0)
     payload.optionSource = field.optionSource;
+  if (field.customOptionsEnabled !== void 0)
+    payload.customOptionsEnabled = field.customOptionsEnabled;
   if (field.groupName !== void 0)
     payload.groupName = field.groupName;
   if (field.masterTypeName !== void 0)
@@ -4629,8 +4631,8 @@ function fieldToPayload(field) {
     payload.lookupLabelField = field.lookupLabelField;
   if (field.isd !== void 0)
     payload.isd = field.isd;
-  if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options) {
-    payload.options = field.options;
+  if ((field.type === "select" || field.type === "radio" || field.type === "checkbox") && field.options && Array.isArray(field.options)) {
+    payload.options = field.options.map((opt) => ({ label: opt.label, value: opt.value }));
   }
   return payload;
 }
@@ -8620,6 +8622,8 @@ var SectionList = class {
 
 // src/builder/FormBuilder.ts
 var advancedCssPanelState = /* @__PURE__ */ new Map();
+var LABEL_DEBOUNCE_MS = 300;
+var labelUpdateTimeouts = /* @__PURE__ */ new Map();
 var FormBuilder = class {
   // For requestAnimationFrame debouncing
   constructor(container, options = {}) {
@@ -8798,7 +8802,7 @@ var FormBuilder = class {
           fields: s.fields.map((f) => ({
             id: f.id,
             type: f.type,
-            // Exclude label - prevents re-renders on field name typing
+            label: f.label,
             layout: f.layout,
             width: f.width,
             css: f.css
@@ -8823,6 +8827,8 @@ var FormBuilder = class {
       cancelAnimationFrame(this.pendingRenderId);
       this.pendingRenderId = null;
     }
+    labelUpdateTimeouts.forEach((id) => clearTimeout(id));
+    labelUpdateTimeouts.clear();
     this.unsubscribe();
     this.container.innerHTML = "";
   }
@@ -9254,7 +9260,16 @@ var FormBuilder = class {
       value: selectedField.label,
       "data-focus-id": `field-label-${selectedField.id}`,
       oninput: (e) => {
-        formStore.getState().updateField(selectedField.id, { label: e.target.value });
+        const fieldId2 = selectedField.id;
+        const value = e.target.value;
+        const existing = labelUpdateTimeouts.get(fieldId2);
+        if (existing)
+          clearTimeout(existing);
+        const timeoutId = setTimeout(() => {
+          labelUpdateTimeouts.delete(fieldId2);
+          formStore.getState().updateField(fieldId2, { label: value });
+        }, LABEL_DEBOUNCE_MS);
+        labelUpdateTimeouts.set(fieldId2, timeoutId);
       }
     }));
     body.appendChild(labelGroup);
@@ -9687,6 +9702,11 @@ var FormBuilder = class {
       const shouldShowOptions = selectedField.type === "select" ? selectedField.customOptionsEnabled && (selectedField.optionSource === "STATIC" || !selectedField.optionSource) : true;
       if (shouldShowOptions) {
         const options = selectedField.options || [];
+        const fieldId2 = selectedField.id;
+        const getCurrentOptions = () => {
+          const field = formStore.getState().schema.sections.flatMap((s) => s.fields).find((f) => f.id === fieldId2);
+          return field?.options || [];
+        };
         const optionsList = createElement("div", { className: "space-y-2 mb-3" });
         options.forEach((opt, index2) => {
           const optionRow = createElement("div", { className: "flex gap-2 items-center" });
@@ -9697,9 +9717,12 @@ var FormBuilder = class {
             placeholder: "Option label",
             "data-focus-id": `field-option-label-${selectedField.id}-${index2}`,
             oninput: (e) => {
-              const newOptions = [...options];
-              newOptions[index2] = { ...newOptions[index2], label: e.target.value };
-              formStore.getState().updateField(selectedField.id, { options: newOptions });
+              const currentOptions = getCurrentOptions();
+              const newOptions = [...currentOptions];
+              if (newOptions[index2]) {
+                newOptions[index2] = { ...newOptions[index2], label: e.target.value };
+                formStore.getState().updateField(fieldId2, { options: newOptions });
+              }
             }
           });
           const valueInput = createElement("input", {
@@ -9709,17 +9732,21 @@ var FormBuilder = class {
             placeholder: "Option value",
             "data-focus-id": `field-option-value-${selectedField.id}-${index2}`,
             oninput: (e) => {
-              const newOptions = [...options];
-              newOptions[index2] = { ...newOptions[index2], value: e.target.value };
-              formStore.getState().updateField(selectedField.id, { options: newOptions });
+              const currentOptions = getCurrentOptions();
+              const newOptions = [...currentOptions];
+              if (newOptions[index2]) {
+                newOptions[index2] = { ...newOptions[index2], value: e.target.value };
+                formStore.getState().updateField(fieldId2, { options: newOptions });
+              }
             }
           });
           const deleteBtn = createElement("button", {
             className: "p-1.5 text-red-600 hover:bg-red-50 rounded transition-colors",
             title: "Delete option",
             onclick: () => {
-              const newOptions = options.filter((_, i) => i !== index2);
-              formStore.getState().updateField(selectedField.id, { options: newOptions });
+              const currentOptions = getCurrentOptions();
+              const newOptions = currentOptions.filter((_, i) => i !== index2);
+              formStore.getState().updateField(fieldId2, { options: newOptions });
             }
           }, [getIcon("Trash2", 14)]);
           optionRow.appendChild(labelInput);
@@ -9733,8 +9760,10 @@ var FormBuilder = class {
           className: "w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
           text: "Add Option",
           onclick: () => {
-            const newOptions = [...selectedField.options || [], { label: `Option ${(selectedField.options || []).length + 1}`, value: `opt${(selectedField.options || []).length + 1}` }];
-            formStore.getState().updateField(selectedField.id, { options: newOptions });
+            const currentOptions = getCurrentOptions();
+            const newOption = { label: `Option ${currentOptions.length + 1}`, value: `opt${currentOptions.length + 1}` };
+            const newOptions = [...currentOptions, newOption];
+            formStore.getState().updateField(fieldId2, { options: newOptions });
             this.render();
           }
         });