diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue index 5570064d03..e6c19a5913 100644 --- a/frappe/public/js/form_builder/components/FieldTypes.vue +++ b/frappe/public/js/form_builder/components/FieldTypes.vue @@ -66,6 +66,7 @@ let fields = computed(() => { gap: 8px; padding: 8px; grid-template-columns: 1fr 1fr; + grid-auto-rows: max-content; .field { background-color: var(--bg-light-gray); diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js index f3bcdb8b90..e397f653e8 100644 --- a/frappe/public/js/form_builder/store.js +++ b/frappe/public/js/form_builder/store.js @@ -131,6 +131,11 @@ export const useStore = defineStore("form-builder-store", { } tab.sections.forEach((section, j) => { + // data before section is added + let fields_copy = JSON.parse(JSON.stringify(fields)); + let old_idx = idx; + section.has_fields = false; + // do not consider first section if label is not set if ((j == 0 && section.df.label) || j > 0) { idx++; @@ -150,8 +155,15 @@ export const useStore = defineStore("form-builder-store", { idx++; field.df.idx = idx; fields.push(field.df); + section.has_fields = true; }); }); + + // restore data back to data before section is added. + if (!section.has_fields) { + fields = fields_copy || []; + idx = old_idx; + } }); }); diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js index 1a60a6751e..76d898eb39 100644 --- a/frappe/public/js/form_builder/utils.js +++ b/frappe/public/js/form_builder/utils.js @@ -88,7 +88,8 @@ export function create_layout(fields) { // remove empty sections for (let tab of layout.tabs) { - for (let section of tab.sections) { + for (let i = tab.sections.length - 1; i >= 0; --i) { + let section = tab.sections[i]; if (!section.has_fields) { tab.sections.splice(tab.sections.indexOf(section), 1); }