From 65f62bb52f38ebe2d154b18bed4a668418d03e35 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 12:23:28 +0530
Subject: [PATCH 01/39] fix: Create doctype through a dialog

---
 frappe/core/doctype/doctype/doctype_list.js | 107 ++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 frappe/core/doctype/doctype/doctype_list.js

diff --git a/frappe/core/doctype/doctype/doctype_list.js b/frappe/core/doctype/doctype/doctype_list.js
new file mode 100644
index 0000000000..5f6ce6c098
--- /dev/null
+++ b/frappe/core/doctype/doctype/doctype_list.js
@@ -0,0 +1,107 @@
+frappe.listview_settings["DocType"] = {
+	primary_action: function () {
+		let non_developer = frappe.session.user !== "Administrator" || !frappe.boot.developer_mode;
+		let new_d = new frappe.ui.Dialog({
+			title: __("Create New DocType"),
+			fields: [
+				{
+					label: __("DocType Name"),
+					fieldname: "doctype_name",
+					fieldtype: "Data",
+					reqd: 1,
+				},
+				{ fieldtype: "Column Break" },
+				{
+					label: __("Module"),
+					fieldname: "module",
+					fieldtype: "Link",
+					options: "Module Def",
+					reqd: 1,
+				},
+				{ fieldtype: "Section Break" },
+				{
+					label: __("Is Submittable"),
+					fieldname: "is_submittable",
+					fieldtype: "Check",
+					description: __(
+						"Once submitted, submittable documents cannot be changed. They can only be Cancelled and Amended."
+					),
+					depends_on: "eval:!doc.istable && !doc.issingle",
+				},
+				{
+					label: __("Is Child Table"),
+					fieldname: "istable",
+					fieldtype: "Check",
+					description: __("Child Tables are shown as a Grid in other DocTypes"),
+					depends_on: "eval:!doc.is_submittable && !doc.issingle",
+				},
+				{
+					label: __("Editable Grid"),
+					fieldname: "editable_grid",
+					fieldtype: "Check",
+					depends_on: "istable",
+					default: 1,
+				},
+				{
+					label: __("Is Single"),
+					fieldname: "issingle",
+					fieldtype: "Check",
+					description: __(
+						"Single Types have only one record no tables associated. Values are stored in tabSingles"
+					),
+					depends_on: "eval:!doc.istable && !doc.is_submittable",
+				},
+				{
+					label: __("Custom?"),
+					fieldname: "custom",
+					fieldtype: "Check",
+					default: non_developer,
+					read_only: non_developer,
+				},
+			],
+			primary_action_label: __("Create & Continue"),
+			primary_action(values) {
+				if (!values.istable) values.editable_grid = 0;
+				frappe.db
+					.insert({
+						doctype: "DocType",
+						name: values.doctype_name,
+						module: values.module,
+						istable: values.istable,
+						editable_grid: values.editable_grid,
+						issingle: values.issingle,
+						custom: values.custom,
+						is_submittable: values.is_submittable,
+						permissions: [
+							{
+								create: 1,
+								delete: 1,
+								email: 1,
+								export: 1,
+								print: 1,
+								read: 1,
+								report: 1,
+								role: "System Manager",
+								share: 1,
+								write: 1,
+							},
+						],
+						fields: [
+							{
+								label: "Title",
+								fieldtype: "Data",
+							},
+						],
+					})
+					.then((doc) => {
+						frappe.set_route("Form", "DocType", doc.name);
+					});
+			},
+			secondary_action_label: __("Cancel"),
+			secondary_action() {
+				new_d.hide();
+			},
+		});
+		new_d.show();
+	},
+};

From 8b5dffff98522d40d561f6e1906a90be0e11bf36 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 12:24:08 +0530
Subject: [PATCH 02/39] chore: made form tab as a first tab in doctype form

---
 frappe/core/doctype/doctype/doctype.json | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frappe/core/doctype/doctype/doctype.json b/frappe/core/doctype/doctype/doctype.json
index 21d5fbfac8..3610d88651 100644
--- a/frappe/core/doctype/doctype/doctype.json
+++ b/frappe/core/doctype/doctype/doctype.json
@@ -8,6 +8,11 @@
  "document_type": "Document",
  "engine": "InnoDB",
  "field_order": [
+  "form_builder_tab",
+  "form_builder",
+  "fields_section",
+  "fields",
+  "details_tab",
   "sb0",
   "module",
   "is_submittable",
@@ -53,10 +58,6 @@
   "advanced",
   "engine",
   "migration_hash",
-  "form_builder_tab",
-  "form_builder",
-  "fields_section",
-  "fields",
   "settings_tab",
   "form_settings_section",
   "image_field",
@@ -660,6 +661,11 @@
    "fieldtype": "Tab Break",
    "label": "Connections",
    "show_dashboard": 1
+  },
+  {
+   "fieldname": "details_tab",
+   "fieldtype": "Tab Break",
+   "label": "Details"
   }
  ],
  "icon": "fa fa-bolt",
@@ -742,7 +748,7 @@
    "link_fieldname": "reference_doctype"
   }
  ],
- "modified": "2023-08-29 12:27:06.587523",
+ "modified": "2023-10-30 12:19:49.757126",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",

From 3407a9963eb8b1eadb9a99ac71ae82a936440b36 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 12:29:06 +0530
Subject: [PATCH 03/39] chore: hide fields table

---
 frappe/core/doctype/doctype/doctype.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frappe/core/doctype/doctype/doctype.json b/frappe/core/doctype/doctype/doctype.json
index 3610d88651..233fcc30cc 100644
--- a/frappe/core/doctype/doctype/doctype.json
+++ b/frappe/core/doctype/doctype/doctype.json
@@ -654,6 +654,7 @@
    "collapsible": 1,
    "fieldname": "fields_section",
    "fieldtype": "Section Break",
+   "hidden": 1,
    "label": "Fields"
   },
   {
@@ -748,7 +749,7 @@
    "link_fieldname": "reference_doctype"
   }
  ],
- "modified": "2023-10-30 12:19:49.757126",
+ "modified": "2023-10-30 12:27:18.098074",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",

From 0e0f38b60dc325febbf72d59a202bfa4e8b9a844 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 13:07:25 +0530
Subject: [PATCH 04/39] feat: added on_tab_change event on form to run logic on
 tab change

---
 frappe/public/js/frappe/form/form.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js
index 32a6ec0d5e..a4f40a97c2 100644
--- a/frappe/public/js/frappe/form/form.js
+++ b/frappe/public/js/frappe/form/form.js
@@ -2039,6 +2039,8 @@ frappe.ui.form.Form = class FrappeForm {
 			this.active_tab_map = {};
 		}
 		this.active_tab_map[this.docname] = tab;
+
+		this.script_manager.trigger("on_tab_change");
 	}
 	get_active_tab() {
 		return this.active_tab_map && this.active_tab_map[this.docname];

From 8ca4501f7e835fa7d646b7fea4e5ed07fed54254 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 13:27:16 +0530
Subject: [PATCH 05/39] fix: if Form tab is active hide comments & form message

---
 frappe/core/doctype/doctype/doctype.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frappe/core/doctype/doctype/doctype.js b/frappe/core/doctype/doctype/doctype.js
index 929244c977..1dde8e03bd 100644
--- a/frappe/core/doctype/doctype/doctype.js
+++ b/frappe/core/doctype/doctype/doctype.js
@@ -119,6 +119,20 @@ frappe.ui.form.on("DocType", {
 	setup_default_views: (frm) => {
 		frappe.model.set_default_views_for_doctype(frm.doc.name, frm);
 	},
+
+	on_tab_change: (frm) => {
+		let current_tab = frm.get_active_tab().label;
+
+		if (current_tab === "Form") {
+			frm.footer.wrapper.hide();
+			frm.form_wrapper.find(".form-message").hide();
+			frm.form_wrapper.addClass("mb-1");
+		} else {
+			frm.footer.wrapper.show();
+			frm.form_wrapper.find(".form-message").show();
+			frm.form_wrapper.removeClass("mb-1");
+		}
+	},
 });
 
 frappe.ui.form.on("DocField", {

From 2a04a89be1789466dc60c890e82815fae9578332 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 13:28:58 +0530
Subject: [PATCH 06/39] fix: changed form builder layout - sidebar is on right

Also remove double scrollbar
---
 frappe/public/js/form_builder/FormBuilder.vue    | 16 ++++++++--------
 .../form_builder/components/FieldProperties.vue  |  2 +-
 .../js/form_builder/components/FieldTypes.vue    |  2 +-
 .../public/js/form_builder/components/Tabs.vue   |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index 427b93584b..e5db31dda1 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -30,16 +30,16 @@ onMounted(() => store.fetch());
 		class="form-builder-container"
 		@click="store.form.selected_field = null"
 	>
-		<div class="form-controls" @click.stop>
-			<div class="form-sidebar">
-				<Sidebar />
-			</div>
-		</div>
 		<div class="form-container">
 			<div class="form-main" :class="[store.preview ? 'preview' : '']">
 				<Tabs />
 			</div>
 		</div>
+		<div class="form-controls" @click.stop>
+			<div class="form-sidebar">
+				<Sidebar />
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -62,7 +62,7 @@ onMounted(() => store.fetch());
 	}
 
 	.form-sidebar {
-		border-right: 1px solid var(--border-color);
+		border-left: 1px solid var(--border-color);
 		border-bottom-left-radius: var(--border-radius);
 	}
 
@@ -70,7 +70,7 @@ onMounted(() => store.fetch());
 		border-radius: var(--border-radius);
 		border: 1px solid var(--border-color);
 		background-color: var(--card-bg);
-		margin: 10px;
+		margin: 5px;
 	}
 
 	.form-sidebar,
@@ -270,7 +270,7 @@ onMounted(() => store.fetch());
 	}
 
 	.form-main > :deep(div:first-child:not(.tab-header)) {
-		max-height: calc(100vh - 160px);
+		max-height: calc(100vh - 178px);
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index 12a8ce79ef..cc4c9609d9 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -89,7 +89,7 @@ let docfield_df = computed(() => {
 
 <style lang="scss" scoped>
 .control-data {
-	height: calc(100vh - 150px);
+	height: calc(100vh - 250px);
 	overflow-y: auto;
 	padding: 8px;
 
diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
index ca215bd3aa..06d027eb61 100644
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ b/frappe/public/js/form_builder/components/FieldTypes.vue
@@ -67,7 +67,7 @@ function on_drag_end(evt) {
 
 <style lang="scss" scoped>
 .fields-container {
-	height: calc(100vh - 133px);
+	height: calc(100vh - 250px);
 	overflow-y: auto;
 	display: grid;
 	gap: 8px;
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 54b0f80765..88a159d8e6 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -279,7 +279,7 @@ function delete_tab(with_children) {
 }
 
 .tab-contents {
-	max-height: calc(100vh - 110px);
+	max-height: calc(100vh - 231px);
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-radius: var(--border-radius);

From 5971e96a5a7148df56dd8ff433828afd159e353b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 13:41:21 +0530
Subject: [PATCH 07/39] fix: sidebar resizer

---
 frappe/public/js/form_builder/components/Sidebar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index dc292058c4..540fbbbb34 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -23,7 +23,8 @@ function start_resize() {
 function resize(e) {
 	sidebar_resizing.value = true;
 	$(".form-builder-container").addClass("resizing");
-	sidebar_width.value = e.clientX - 90;
+	let screen_width = e.view.innerWidth;
+	sidebar_width.value = screen_width - e.clientX - 90;
 
 	if (sidebar_width.value < 16 * 16) {
 		sidebar_width.value = 16 * 16;
@@ -71,7 +72,7 @@ watch(
 .sidebar-resizer {
 	position: absolute;
 	top: 0;
-	right: -6px;
+	left: -5px;
 	width: 5px;
 	height: 100%;
 	opacity: 0;

From 27997004558bd7e900f0e61469290eb794d34cb9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 14:09:20 +0530
Subject: [PATCH 08/39] fix: open new doctype dailog on /new-doctype-1

---
 frappe/core/doctype/doctype/doctype.js      | 8 ++++++++
 frappe/core/doctype/doctype/doctype.json    | 3 ++-
 frappe/core/doctype/doctype/doctype_list.js | 7 +++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frappe/core/doctype/doctype/doctype.js b/frappe/core/doctype/doctype/doctype.js
index 1dde8e03bd..c21654a109 100644
--- a/frappe/core/doctype/doctype/doctype.js
+++ b/frappe/core/doctype/doctype/doctype.js
@@ -2,6 +2,12 @@
 // MIT License. See license.txt
 
 frappe.ui.form.on("DocType", {
+	onload: function (frm) {
+		if (frm.is_new()) {
+			frappe.listview_settings["DocType"].new_doctype_dialog();
+		}
+	},
+
 	before_save: function (frm) {
 		let form_builder = frappe.form_builder;
 		if (form_builder?.store) {
@@ -13,6 +19,7 @@ frappe.ui.form.on("DocType", {
 			}
 		}
 	},
+
 	after_save: function (frm) {
 		if (
 			frappe.form_builder &&
@@ -22,6 +29,7 @@ frappe.ui.form.on("DocType", {
 			frappe.form_builder.store.fetch();
 		}
 	},
+
 	refresh: function (frm) {
 		frm.set_query("role", "permissions", function (doc) {
 			if (doc.custom && frappe.session.user != "Administrator") {
diff --git a/frappe/core/doctype/doctype/doctype.json b/frappe/core/doctype/doctype/doctype.json
index 233fcc30cc..388050bd24 100644
--- a/frappe/core/doctype/doctype/doctype.json
+++ b/frappe/core/doctype/doctype/doctype.json
@@ -641,6 +641,7 @@
    "label": "Settings"
   },
   {
+   "depends_on": "eval:!doc.__islocal",
    "fieldname": "form_builder_tab",
    "fieldtype": "Tab Break",
    "label": "Form"
@@ -749,7 +750,7 @@
    "link_fieldname": "reference_doctype"
   }
  ],
- "modified": "2023-10-30 12:27:18.098074",
+ "modified": "2023-10-30 13:55:51.156211",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",
diff --git a/frappe/core/doctype/doctype/doctype_list.js b/frappe/core/doctype/doctype/doctype_list.js
index 5f6ce6c098..4afa45c8c3 100644
--- a/frappe/core/doctype/doctype/doctype_list.js
+++ b/frappe/core/doctype/doctype/doctype_list.js
@@ -1,5 +1,9 @@
 frappe.listview_settings["DocType"] = {
 	primary_action: function () {
+		this.new_doctype_dialog();
+	},
+
+	new_doctype_dialog() {
 		let non_developer = frappe.session.user !== "Administrator" || !frappe.boot.developer_mode;
 		let new_d = new frappe.ui.Dialog({
 			title: __("Create New DocType"),
@@ -100,6 +104,9 @@ frappe.listview_settings["DocType"] = {
 			secondary_action_label: __("Cancel"),
 			secondary_action() {
 				new_d.hide();
+				if (frappe.get_route()[0] === "Form") {
+					frappe.set_route("List", "DocType");
+				}
 			},
 		});
 		new_d.show();

From 0c8e6aa1c0ada880eb2d664616f80e52ba8c9155 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 15:24:15 +0530
Subject: [PATCH 09/39] fix: removed FieldTypes from sidebar

---
 frappe/public/js/form_builder/FormBuilder.vue |  2 +-
 .../components/FieldProperties.vue            | 14 ++++++++-
 .../js/form_builder/components/SearchBox.vue  |  6 ++--
 .../js/form_builder/components/Sidebar.vue    | 30 ++-----------------
 4 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index e5db31dda1..f18c0f9719 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -63,7 +63,7 @@ onMounted(() => store.fetch());
 
 	.form-sidebar {
 		border-left: 1px solid var(--border-color);
-		border-bottom-left-radius: var(--border-radius);
+		border-bottom-right-radius: var(--border-radius);
 	}
 
 	.form-main {
diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index cc4c9609d9..3bd20ff192 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -84,12 +84,15 @@ let docfield_df = computed(() => {
 				/>
 			</div>
 		</div>
+		<div class="empty-state" v-else>
+			<div>Select a field to edit its properties.</div>
+		</div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
 .control-data {
-	height: calc(100vh - 250px);
+	height: calc(100vh - 205px);
 	overflow-y: auto;
 	padding: 8px;
 
@@ -104,5 +107,14 @@ let docfield_df = computed(() => {
 			cursor: default;
 		}
 	}
+
+	.empty-state {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		text-align: center;
+		color: var(--disabled-text-color);
+	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/SearchBox.vue b/frappe/public/js/form_builder/components/SearchBox.vue
index 46a2c86f67..c8a5d161f5 100644
--- a/frappe/public/js/form_builder/components/SearchBox.vue
+++ b/frappe/public/js/form_builder/components/SearchBox.vue
@@ -18,7 +18,7 @@
 .search-box {
 	display: flex;
 	position: relative;
-	padding: 0px 9px 9px;
+	padding: 5px;
 	background-color: var(--fg-color);
 	border-bottom: 1px solid var(--border-color);
 
@@ -28,8 +28,8 @@
 
 	.search-icon {
 		position: absolute;
-		left: 16px;
-		top: 2px;
+		left: 12px;
+		top: 7px;
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 540fbbbb34..55f178e32d 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -6,8 +6,6 @@ import { useStore } from "../store";
 
 let store = useStore();
 
-let tab_titles = [__("Field Types"), __("Field Properties")];
-let active_tab = ref(tab_titles[0]);
 let sidebar_width = ref(272);
 let sidebar_resizing = ref(false);
 
@@ -33,14 +31,6 @@ function resize(e) {
 		sidebar_width.value = 24 * 16;
 	}
 }
-
-watch(
-	() => store.form.selected_field,
-	value => {
-		active_tab.value = value ? tab_titles[1] : tab_titles[0];
-	},
-	{ deep: true }
-);
 </script>
 
 <template>
@@ -49,22 +39,7 @@ watch(
 		@mousedown="start_resize"
 	/>
 	<div class="sidebar-container" :style="{ width: `${sidebar_width}px` }">
-		<div class="tab-header">
-			<div
-				:class="['tab', active_tab == tab ? 'active' : '']"
-				v-for="(tab, i) in tab_titles"
-				:key="i"
-				@click="active_tab = tab"
-			>
-				{{ tab }}
-			</div>
-		</div>
-		<div :class="['tab-content', active_tab == tab_titles[0] ? 'active' : '']">
-			<FieldTypes />
-		</div>
-		<div :class="['tab-content', active_tab == tab_titles[1] ? 'active' : '']">
-			<FieldProperties />
-		</div>
+		<FieldProperties />
 	</div>
 </template>
 
@@ -81,7 +56,8 @@ watch(
 	z-index: 4;
 	cursor: col-resize;
 
-	&:hover, &.resizing {
+	&:hover,
+	&.resizing {
 		opacity: 1;
 	}
 }

From afc3babbf92c51b5d15a86ce6567209d2b6cceab Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 17:43:06 +0530
Subject: [PATCH 10/39] refactor: remove/add tab

---
 .../components/FieldProperties.vue            | 29 +++---
 .../js/form_builder/components/SearchBox.vue  |  9 +-
 .../js/form_builder/components/Sidebar.vue    | 36 ++++++-
 .../js/form_builder/components/Tabs.vue       | 97 ++++++++++---------
 frappe/public/js/form_builder/store.js        | 34 ++++++-
 5 files changed, 138 insertions(+), 67 deletions(-)

diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index 3bd20ff192..af32a53193 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -68,7 +68,16 @@ let docfield_df = computed(() => {
 </script>
 
 <template>
-	<SearchBox v-model="search_text" />
+	<div class="header">
+		<SearchBox class="flex-1" v-model="search_text" />
+		<button
+			class="btn btn-xs"
+			:title="__('Close properties')"
+			@click="store.form.selected_field = null"
+		>
+			<div v-html="frappe.utils.icon('remove', 'sm')"></div>
+		</button>
+	</div>
 	<div class="control-data">
 		<div v-if="store.form.selected_field">
 			<div class="field" v-for="(df, i) in docfield_df" :key="i">
@@ -84,13 +93,16 @@ let docfield_df = computed(() => {
 				/>
 			</div>
 		</div>
-		<div class="empty-state" v-else>
-			<div>Select a field to edit its properties.</div>
-		</div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
+.header {
+	display: flex;
+	padding: 5px;
+	gap: 5px;
+	border-bottom: 1px solid var(--border-color);
+}
 .control-data {
 	height: calc(100vh - 205px);
 	overflow-y: auto;
@@ -107,14 +119,5 @@ let docfield_df = computed(() => {
 			cursor: default;
 		}
 	}
-
-	.empty-state {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		text-align: center;
-		color: var(--disabled-text-color);
-	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/SearchBox.vue b/frappe/public/js/form_builder/components/SearchBox.vue
index c8a5d161f5..bae326058d 100644
--- a/frappe/public/js/form_builder/components/SearchBox.vue
+++ b/frappe/public/js/form_builder/components/SearchBox.vue
@@ -5,7 +5,7 @@
 		<input
 			class="search-input form-control"
 			type="text"
-			:placeholder="__('Search fields')"
+			:placeholder="__('Search properties...')"
 			@input="event => $emit('update:modelValue', event.target.value)"
 		/>
 		<span class="search-icon">
@@ -18,9 +18,8 @@
 .search-box {
 	display: flex;
 	position: relative;
-	padding: 5px;
 	background-color: var(--fg-color);
-	border-bottom: 1px solid var(--border-color);
+	width: 100%;
 
 	.search-input {
 		padding-left: 30px;
@@ -28,8 +27,8 @@
 
 	.search-icon {
 		position: absolute;
-		left: 12px;
-		top: 7px;
+		left: 7px;
+		top: 2px;
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 55f178e32d..67fd084950 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -39,7 +39,21 @@ function resize(e) {
 		@mousedown="start_resize"
 	/>
 	<div class="sidebar-container" :style="{ width: `${sidebar_width}px` }">
-		<FieldProperties />
+		<FieldProperties v-if="store.form.selected_field" />
+		<div class="default-state" v-else>
+			<div class="actions" v-if="store.form.layout.tabs.length == 1">
+				<button
+					class="new-tab-btn btn btn-default btn-xs"
+					:title="__('Add new tab')"
+					@click="store.add_new_tab"
+				>
+					{{ __("+ Add tab") }}
+				</button>
+			</div>
+			<div class="empty-state">
+				<div>Select a field to edit its properties.</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -61,6 +75,7 @@ function resize(e) {
 		opacity: 1;
 	}
 }
+
 .tab-header {
 	display: flex;
 	justify-content: space-between;
@@ -104,4 +119,23 @@ function resize(e) {
 		display: block;
 	}
 }
+
+.default-state {
+	height: calc(100vh - 196px);
+
+	.actions {
+		padding: 5px;
+		display: flex;
+		justify-content: flex-end;
+		border-bottom: 1px solid var(--border-color);
+	}
+	.empty-state {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		text-align: center;
+		color: var(--disabled-text-color);
+	}
+}
 </style>
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 88a159d8e6..ca0b8b9bb6 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -13,17 +13,7 @@ let has_tabs = computed(() => store.form.layout.tabs.length > 1);
 store.form.active_tab = store.form.layout.tabs[0].df.name;
 
 function activate_tab(tab) {
-	store.form.active_tab = tab.df.name;
-	store.form.selected_field = tab.df;
-
-	// scroll to active tab
-	nextTick(() => {
-		$(".tabs .tab.active")[0].scrollIntoView({
-			behavior: "smooth",
-			inline: "center",
-			block: "nearest",
-		});
-	});
+	store.activate_tab(tab);
 }
 
 function drag_over(tab) {
@@ -34,13 +24,7 @@ function drag_over(tab) {
 }
 
 function add_new_tab() {
-	let tab = {
-		df: store.get_df("Tab Break", "", "Tab " + (store.form.layout.tabs.length + 1)),
-		sections: [section_boilerplate()],
-	};
-
-	store.form.layout.tabs.push(tab);
-	activate_tab(tab);
+	store.add_new_tab();
 }
 
 function add_new_section() {
@@ -51,8 +35,8 @@ function add_new_section() {
 
 function is_current_tab_empty() {
 	// check if sections have columns and it contains fields
-	return !store.current_tab.sections.some(
-		section => section.columns.some(column => column.fields.length)
+	return !store.current_tab.sections.some((section) =>
+		section.columns.some((column) => column.fields.length)
 	);
 }
 
@@ -67,7 +51,11 @@ function remove_tab() {
 	} else {
 		confirm_dialog(
 			__("Delete Tab", null, "Title of confirmation dialog"),
-			__("Are you sure you want to delete the tab? All the sections along with fields in the tab will be moved to the previous tab.", null, "Confirmation dialog message"),
+			__(
+				"Are you sure you want to delete the tab? All the sections along with fields in the tab will be moved to the previous tab.",
+				null,
+				"Confirmation dialog message"
+			),
 			() => delete_tab(),
 			__("Delete tab", null, "Button text"),
 			() => delete_tab(true),
@@ -109,7 +97,7 @@ function delete_tab(with_children) {
 </script>
 
 <template>
-	<div class="tab-header" v-if="!(store.form.layout.tabs.length == 1 && store.read_only)">
+	<div class="tab-header" v-if="store.form.layout.tabs.length > 1">
 		<draggable
 			v-show="has_tabs"
 			class="tabs"
@@ -121,20 +109,29 @@ function delete_tab(with_children) {
 			:disabled="store.read_only"
 		>
 			<template #item="{ element }">
-				<div
-					:class="['tab', store.form.active_tab == element.df.name ? 'active' : '']"
-					:title="element.df.fieldname"
-					:data-is-user-generated="store.is_user_generated_field(element)"
-					@click.stop="activate_tab(element)"
-					@dragstart="dragged = true"
-					@dragend="dragged = false"
-					@dragover="drag_over(element)"
-				>
-					<EditableInput
-						:text="element.df.label"
-						:placeholder="__('Tab Label')"
-						v-model="element.df.label"
-					/>
+				<div class="tab-container">
+					<div
+						:class="['tab', store.form.active_tab == element.df.name ? 'active' : '']"
+						:title="element.df.fieldname"
+						:data-is-user-generated="store.is_user_generated_field(element)"
+						@click.stop="activate_tab(element)"
+						@dragstart="dragged = true"
+						@dragend="dragged = false"
+						@dragover="drag_over(element)"
+					>
+						<EditableInput
+							:text="element.df.label"
+							:placeholder="__('Tab Label')"
+							v-model="element.df.label"
+						/>
+					</div>
+					<button
+						class="remove-tab-btn btn btn-xs"
+						:title="__('Remove tab')"
+						@click="remove_tab"
+					>
+						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
+					</button>
 				</div>
 			</template>
 		</draggable>
@@ -145,19 +142,10 @@ function delete_tab(with_children) {
 				:title="__('Add new tab')"
 				@click="add_new_tab"
 			>
-				<div v-if="has_tabs" v-html="frappe.utils.icon('add', 'sm')"></div>
-				<div class="add-btn-text" v-else>
-					{{ __("Add new tab") }}
+				<div class="add-btn-text">
+					{{ __("+ Add tab") }}
 				</div>
 			</button>
-			<button
-				v-if="has_tabs"
-				class="remove-tab-btn btn btn-xs"
-				:title="__('Remove selected tab')"
-				@click="remove_tab"
-			>
-				<div v-html="frappe.utils.icon('remove', 'sm')"></div>
-			</button>
 		</div>
 	</div>
 
@@ -276,6 +264,21 @@ function delete_tab(with_children) {
 			}
 		}
 	}
+
+	.tab-container {
+		display: flex;
+		align-items: center;
+
+		&:hover .remove-tab-btn {
+			display: block;
+		}
+
+		.remove-tab-btn {
+			margin-left: -5px;
+			display: none;
+			padding: 4px;
+		}
+	}
 }
 
 .tab-contents {
diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index 6dad866786..4a0412bb89 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -1,5 +1,10 @@
 import { defineStore } from "pinia";
-import { create_layout, scrub_field_names, load_doctype_model } from "./utils";
+import {
+	create_layout,
+	scrub_field_names,
+	load_doctype_model,
+	section_boilerplate,
+} from "./utils";
 import { computed, nextTick, ref } from "vue";
 import { useDebouncedRefHistory, onKeyDown } from "@vueuse/core";
 
@@ -297,6 +302,31 @@ export const useStore = defineStore("form-builder-store", () => {
 		return create_layout(doc.value.fields);
 	}
 
+	// Tab actions
+	function add_new_tab() {
+		let tab = {
+			df: get_df("Tab Break", "", "Tab " + (form.value.layout.tabs.length + 1)),
+			sections: [section_boilerplate()],
+		};
+
+		form.value.layout.tabs.push(tab);
+		activate_tab(tab);
+	}
+
+	function activate_tab(tab) {
+		form.value.active_tab = tab.df.name;
+		form.value.selected_field = tab.df;
+
+		// scroll to active tab
+		nextTick(() => {
+			$(".tabs .tab.active")[0].scrollIntoView({
+				behavior: "smooth",
+				inline: "center",
+				block: "nearest",
+			});
+		});
+	}
+
 	return {
 		doctype,
 		frm,
@@ -320,5 +350,7 @@ export const useStore = defineStore("form-builder-store", () => {
 		get_updated_fields,
 		is_df_updated,
 		get_layout,
+		add_new_tab,
+		activate_tab,
 	};
 });

From ac393773be47ba727942efe5f468f458bfd70c75 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 18:16:17 +0530
Subject: [PATCH 11/39] fix: absolute remove tab button

also reduced tab header height
---
 .../js/form_builder/components/Sidebar.vue    |  6 ++-
 .../js/form_builder/components/Tabs.vue       | 50 +++++++++----------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 67fd084950..01975c4f4f 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -121,7 +121,9 @@ function resize(e) {
 }
 
 .default-state {
-	height: calc(100vh - 196px);
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 166px);
 
 	.actions {
 		padding: 5px;
@@ -130,10 +132,10 @@ function resize(e) {
 		border-bottom: 1px solid var(--border-color);
 	}
 	.empty-state {
+		flex: 1;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		height: 100%;
 		text-align: center;
 		color: var(--disabled-text-color);
 	}
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index ca0b8b9bb6..2f880cf75e 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -109,28 +109,26 @@ function delete_tab(with_children) {
 			:disabled="store.read_only"
 		>
 			<template #item="{ element }">
-				<div class="tab-container">
-					<div
-						:class="['tab', store.form.active_tab == element.df.name ? 'active' : '']"
-						:title="element.df.fieldname"
-						:data-is-user-generated="store.is_user_generated_field(element)"
-						@click.stop="activate_tab(element)"
-						@dragstart="dragged = true"
-						@dragend="dragged = false"
-						@dragover="drag_over(element)"
-					>
-						<EditableInput
-							:text="element.df.label"
-							:placeholder="__('Tab Label')"
-							v-model="element.df.label"
-						/>
-					</div>
+				<div
+					:class="['tab', store.form.active_tab == element.df.name ? 'active' : '']"
+					:title="element.df.fieldname"
+					:data-is-user-generated="store.is_user_generated_field(element)"
+					@click.stop="activate_tab(element)"
+					@dragstart="dragged = true"
+					@dragend="dragged = false"
+					@dragover="drag_over(element)"
+				>
+					<EditableInput
+						:text="element.df.label"
+						:placeholder="__('Tab Label')"
+						v-model="element.df.label"
+					/>
 					<button
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
 						@click="remove_tab"
 					>
-						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
+						<div v-html="frappe.utils.icon('remove', 'xs')"></div>
 					</button>
 				</div>
 			</template>
@@ -188,7 +186,7 @@ function delete_tab(with_children) {
 .tab-header {
 	display: flex;
 	justify-content: space-between;
-	min-height: 53px;
+	min-height: 42px;
 	align-items: center;
 	background-color: var(--fg-color);
 	border-bottom: 1px solid var(--border-color);
@@ -234,8 +232,10 @@ function delete_tab(with_children) {
 	}
 
 	.tab {
+		display: flex;
+		align-items: center;
 		position: relative;
-		padding: var(--padding-md);
+		padding: 10px 18px 10px 15px;
 		color: var(--text-muted);
 		min-width: max-content;
 		cursor: pointer;
@@ -263,26 +263,22 @@ function delete_tab(with_children) {
 				border-color: var(--primary);
 			}
 		}
-	}
-
-	.tab-container {
-		display: flex;
-		align-items: center;
 
 		&:hover .remove-tab-btn {
 			display: block;
 		}
 
 		.remove-tab-btn {
-			margin-left: -5px;
+			position: absolute;
+			right: -2px;
 			display: none;
-			padding: 4px;
+			padding: 2px;
 		}
 	}
 }
 
 .tab-contents {
-	max-height: calc(100vh - 231px);
+	max-height: calc(100vh - 220px);
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-radius: var(--border-radius);

From 244b2cbb60d362381208c3ccca3acf0fb3452ab7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 18:26:33 +0530
Subject: [PATCH 12/39] fix: minor fix

---
 frappe/public/js/form_builder/components/Tabs.vue | 2 +-
 frappe/public/js/form_builder/store.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 2f880cf75e..313bf44ace 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -126,7 +126,7 @@ function delete_tab(with_children) {
 					<button
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
-						@click="remove_tab"
+						@click.stop="remove_tab"
 					>
 						<div v-html="frappe.utils.icon('remove', 'xs')"></div>
 					</button>
diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index 4a0412bb89..8edb86896f 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -319,7 +319,7 @@ export const useStore = defineStore("form-builder-store", () => {
 
 		// scroll to active tab
 		nextTick(() => {
-			$(".tabs .tab.active")[0].scrollIntoView({
+			$(".tabs .tab.active")[0]?.scrollIntoView({
 				behavior: "smooth",
 				inline: "center",
 				block: "nearest",

From a28c8e97456731d3a8960ece06770fce99e20e66 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 21:47:39 +0530
Subject: [PATCH 13/39] chore: cleanup

---
 frappe/public/js/form_builder/components/Sidebar.vue | 3 +--
 frappe/public/js/form_builder/components/Tabs.vue    | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 01975c4f4f..6c084186e2 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -1,8 +1,7 @@
 <script setup>
-import FieldTypes from "./FieldTypes.vue";
 import FieldProperties from "./FieldProperties.vue";
-import { ref, watch } from "vue";
 import { useStore } from "../store";
+import { ref } from "vue";
 
 let store = useStore();
 
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 313bf44ace..588f570aca 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -1,10 +1,10 @@
 <script setup>
 import Section from "./Section.vue";
 import EditableInput from "./EditableInput.vue";
-import draggable from "vuedraggable";
 import { useStore } from "../store";
 import { section_boilerplate, confirm_dialog } from "../utils";
-import { ref, computed, nextTick } from "vue";
+import draggable from "vuedraggable";
+import { ref, computed } from "vue";
 
 let store = useStore();
 

From bdbb11fbb9e71196d1c008fa5d986fdd462a595f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Oct 2023 21:48:12 +0530
Subject: [PATCH 14/39] fix: add new field using + button on field

---
 .../js/form_builder/components/Dropdown.vue   |  97 ++++++++++++++
 .../js/form_builder/components/Field.vue      | 118 ++++++++++++++++--
 .../js/form_builder/components/FieldTypes.vue |  93 --------------
 3 files changed, 203 insertions(+), 105 deletions(-)
 create mode 100644 frappe/public/js/form_builder/components/Dropdown.vue
 delete mode 100644 frappe/public/js/form_builder/components/FieldTypes.vue

diff --git a/frappe/public/js/form_builder/components/Dropdown.vue b/frappe/public/js/form_builder/components/Dropdown.vue
new file mode 100644
index 0000000000..6a5c9347d5
--- /dev/null
+++ b/frappe/public/js/form_builder/components/Dropdown.vue
@@ -0,0 +1,97 @@
+<template>
+	<div class="drop-down">
+		<div class="search-box">
+			<input
+				ref="searchInput"
+				class="search-input form-control"
+				type="text"
+				:placeholder="__('Search field...')"
+				@input="(event) => $emit('update:modelValue', event.target.value)"
+				:value="modelValue"
+				@click.stop
+			/>
+			<span class="search-icon">
+				<div v-html="frappe.utils.icon('search', 'sm')"></div>
+			</span>
+		</div>
+		<div class="drop-down-list">
+			<button
+				class="btn drop-down-item"
+				v-for="(item, i) in items"
+				:key="i"
+				@click.stop="(i) => item.onClick(i)"
+			>
+				<slot>{{ item.label }}</slot>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const props = defineProps({
+	items: {
+		type: Array,
+		required: true,
+	},
+	modelValue: {
+		type: String,
+		default: "",
+	},
+});
+
+const searchInput = ref(null);
+
+onMounted(() => {
+	searchInput.value.focus();
+});
+</script>
+
+<style lang="scss" scoped>
+.drop-down {
+	display: inline-block;
+	background-color: var(--fg-color);
+	box-shadow: var(--shadow-base) !important;
+	border-radius: var(--border-radius-sm);
+	top: 30px;
+	right: 0;
+	width: 170px;
+	z-index: 99999999;
+}
+
+.drop-down-list {
+	overflow-y: auto;
+	max-height: 250px;
+	text-align: left;
+	padding: 0 6px 6px;
+}
+
+.drop-down-item {
+	font-size: small;
+	text-align: left;
+	border-radius: var(--border-radius-sm);
+	margin: 1px 0px;
+	width: 100%;
+
+	&:hover {
+		background-color: var(--bg-light-gray);
+	}
+}
+
+.search-box {
+	padding: 6px;
+	.search-input {
+		padding-left: 30px;
+		font-size: small;
+		width: 100% !important;
+		background-color: var(--control-bg) !important;
+	}
+
+	.search-icon {
+		position: absolute;
+		left: 13px;
+		top: 11px;
+	}
+}
+</style>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index b67d6db0c9..6c0d1bb76e 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -1,17 +1,75 @@
 <script setup>
 import EditableInput from "./EditableInput.vue";
-import { ref, computed } from "vue";
+import Dropdown from "./Dropdown.vue";
 import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
+import { createPopper } from "@popperjs/core";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps(["column", "field"]);
-let store = useStore();
+const store = useStore();
 
-let hovered = ref(false);
-let component = computed(() => {
+const hovered = ref(false);
+const component = computed(() => {
 	return props.field.df.fieldtype.replace(" ", "") + "Control";
 });
 
+const show_fieldtype_dropdown = ref(false);
+const search_text = ref("");
+const fields = computed(() => {
+	let fields = frappe.model.all_fieldtypes
+		.filter((df) => {
+			if (in_list(frappe.model.layout_fields, df)) {
+				return false;
+			}
+			if (search_text.value) {
+				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
+					return true;
+				}
+				return false;
+			} else {
+				return true;
+			}
+		})
+		.map((df) => {
+			let out = {
+				label: df,
+				onClick: () => {
+					let new_field = {
+						df: store.get_df(df),
+						table_columns: [],
+					};
+
+					add_new_field(clone_field(new_field));
+				},
+			};
+			return out;
+		});
+	return [...fields];
+});
+
+const add_field_btn_ref = ref(null);
+const dropdown_ref = ref(null);
+const popper = ref(null);
+
+function setupPopper() {
+	if (!popper.value) {
+		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
+			placement: "bottom-end",
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [0, 4],
+					},
+				},
+			],
+		});
+	} else {
+		popper.value.update();
+	}
+}
+
 function remove_field() {
 	if (store.is_customize_form && props.field.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
@@ -23,8 +81,8 @@ function remove_field() {
 }
 
 function move_fields_to_column() {
-	let current_section = store.current_tab.sections.find(section =>
-		section.columns.find(column => column == props.column)
+	let current_section = store.current_tab.sections.find((section) =>
+		section.columns.find((column) => column == props.column)
 	);
 	move_children_to_parent(props, "column", "field", current_section);
 }
@@ -53,6 +111,27 @@ function duplicate_field() {
 	props.column.fields.splice(index + 1, 0, duplicate_field);
 	store.form.selected_field = duplicate_field.df;
 }
+
+function add_new_field(field) {
+	// insert new field after current field
+	let index = props.column.fields.indexOf(props.field);
+	props.column.fields.splice(index + 1, 0, field);
+	store.form.selected_field = field.df;
+	show_fieldtype_dropdown.value = false;
+	hovered.value = false;
+}
+
+function toggle_fieldtype_dropdown() {
+	show_fieldtype_dropdown.value = !show_fieldtype_dropdown.value;
+	search_text.value = "";
+	setupPopper();
+}
+
+watch(hovered, (val) => {
+	if (val && store.form.selected_field && store.form.selected_field != props.field.df) {
+		show_fieldtype_dropdown.value = false;
+	}
+});
 </script>
 
 <template>
@@ -60,7 +139,7 @@ function duplicate_field() {
 		:class="[
 			'field',
 			hovered ? 'hovered' : '',
-			store.selected(field.df.name) ? 'selected' : ''
+			store.selected(field.df.name) ? 'selected' : '',
 		]"
 		:title="field.df.fieldname"
 		@click.stop="store.form.selected_field = field.df"
@@ -82,17 +161,28 @@ function duplicate_field() {
 						v-model="field.df.label"
 					/>
 					<div class="reqd-asterisk" v-if="field.df.reqd">*</div>
-					<div class="help-icon" v-if="field.df.documentation_url" v-html="frappe.utils.icon('help', 'sm')"></div>
+					<div
+						class="help-icon"
+						v-if="field.df.documentation_url"
+						v-html="frappe.utils.icon('help', 'sm')"
+					></div>
 				</div>
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
 					<button
-						v-if="field.df.fieldtype == 'HTML'"
-						class="btn btn-xs btn-icon"
-						@click="edit_html"
+						ref="add_field_btn_ref"
+						class="add-field-btn btn btn-xs btn-icon"
+						@click="toggle_fieldtype_dropdown"
 					>
-						<div v-html="frappe.utils.icon('edit', 'sm')"></div>
+						<div v-html="frappe.utils.icon('add', 'sm')" />
+						<div class="drop-down" ref="dropdown_ref">
+							<Dropdown
+								v-if="show_fieldtype_dropdown"
+								:items="fields"
+								v-model="search_text"
+							/>
+						</div>
 					</button>
 					<button
 						v-if="column.fields.indexOf(field)"
@@ -177,4 +267,8 @@ function duplicate_field() {
 		}
 	}
 }
+
+.drop-down {
+	z-index: 99999;
+}
 </style>
diff --git a/frappe/public/js/form_builder/components/FieldTypes.vue b/frappe/public/js/form_builder/components/FieldTypes.vue
deleted file mode 100644
index 06d027eb61..0000000000
--- a/frappe/public/js/form_builder/components/FieldTypes.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup>
-import SearchBox from "./SearchBox.vue";
-import draggable from "vuedraggable";
-import { ref, computed } from "vue";
-import { useStore } from "../store";
-import { clone_field } from "../utils";
-
-let store = useStore();
-let search_text = ref("");
-
-let fields = computed(() => {
-	let fields = frappe.model.all_fieldtypes
-		.filter(df => {
-			if (in_list(frappe.model.layout_fields, df)) {
-				return false;
-			}
-			if (search_text.value) {
-				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
-					return true;
-				}
-				return false;
-			} else {
-				return true;
-			}
-		})
-		.map(df => {
-			let out = {
-				df: store.get_df(df),
-				table_columns: [],
-			};
-			return out;
-		});
-
-	return [...fields];
-});
-
-function on_drag_start(evt) {
-	$(evt.item).html('<div class="drop-it-here"></div>');
-}
-
-function on_drag_end(evt) {
-	let old_html = evt.clone.innerHTML;
-	$(evt.item).html(old_html);
-}
-</script>
-
-<template>
-	<SearchBox v-model="search_text" />
-	<draggable
-		class="fields-container"
-		:list="fields"
-		:group="{ name: 'fields', pull: 'clone', put: false }"
-		:sort="false"
-		:clone="clone_field"
-		item-key="id"
-		:remove-clone-on-hide="false"
-		@start="on_drag_start"
-		@end="on_drag_end"
-	>
-		<template #item="{ element }">
-			<div class="field" :title="element.df.fieldtype">
-				{{ element.df.fieldtype }}
-			</div>
-		</template>
-	</draggable>
-</template>
-
-<style lang="scss" scoped>
-.fields-container {
-	height: calc(100vh - 250px);
-	overflow-y: auto;
-	display: grid;
-	gap: 8px;
-	padding: 8px;
-	grid-template-columns: 1fr 1fr;
-	grid-auto-rows: max-content;
-
-	.field {
-		display: block !important;
-		background-color: var(--bg-light-gray);
-		border-radius: var(--border-radius);
-		border: 0.5px solid var(--dark-border-color);
-		padding: 0.5rem 0.75rem;
-		font-size: var(--text-sm);
-		cursor: pointer;
-
-		&.sortable-ghost {
-			position: absolute;
-			opacity: 0;
-		}
-	}
-}
-</style>

From 5f8887d79459003e9b64e011f9a5fda53b2c725e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 00:35:00 +0530
Subject: [PATCH 15/39] fix: add new field btn in empty column

also created AddFieldButton component
---
 .../components/AddFieldButton.vue             | 127 ++++++++++++++++++
 .../js/form_builder/components/Column.vue     |  69 +++++++---
 .../js/form_builder/components/Field.vue      | 118 +++-------------
 .../js/form_builder/components/Section.vue    |  14 +-
 .../js/form_builder/components/Tabs.vue       |  11 +-
 5 files changed, 212 insertions(+), 127 deletions(-)
 create mode 100644 frappe/public/js/form_builder/components/AddFieldButton.vue

diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
new file mode 100644
index 0000000000..79728a4f0f
--- /dev/null
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -0,0 +1,127 @@
+<template>
+	<button
+		ref="add_field_btn_ref"
+		class="add-field-btn btn btn-xs btn-icon"
+		:title="__('Add field')"
+		@click="toggle_fieldtype_dropdown"
+	>
+		<slot>
+			{{ __("Add a field") }}
+		</slot>
+		<div class="drop-down" ref="dropdown_ref">
+			<Dropdown v-if="show" :items="fields" v-model="search_text" />
+		</div>
+	</button>
+</template>
+
+<script setup>
+import Dropdown from "./Dropdown.vue";
+import { useStore } from "../store";
+import { clone_field } from "../utils";
+import { createPopper } from "@popperjs/core";
+import { computed, ref, watch } from "vue";
+
+const store = useStore();
+
+const props = defineProps({
+	column: {
+		type: Object,
+		default: null,
+	},
+	field: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(["update:modelValue", "update_parent"]);
+
+const selected = computed(() => {
+	let fieldname = props.field ? props.field.df.name : props.column.df.name;
+	return store.selected(fieldname);
+});
+
+const show = ref(false);
+const search_text = ref("");
+const fields = computed(() => {
+	let fields = frappe.model.all_fieldtypes
+		.filter((df) => {
+			if (in_list(frappe.model.layout_fields, df)) {
+				return false;
+			}
+			if (search_text.value) {
+				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
+					return true;
+				}
+				return false;
+			} else {
+				return true;
+			}
+		})
+		.map((df) => {
+			let out = {
+				label: df,
+				onClick: () => {
+					let new_field = {
+						df: store.get_df(df),
+						table_columns: [],
+					};
+
+					add_new_field(clone_field(new_field));
+				},
+			};
+			return out;
+		});
+	return [...fields];
+});
+
+const add_field_btn_ref = ref(null);
+const dropdown_ref = ref(null);
+const popper = ref(null);
+
+function setupPopper() {
+	if (!popper.value) {
+		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
+			placement: "bottom-end",
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [0, 4],
+					},
+				},
+			],
+		});
+	} else {
+		popper.value.update();
+	}
+}
+
+function toggle_fieldtype_dropdown() {
+	show.value = !show.value;
+	search_text.value = "";
+	setTimeout(() => setupPopper());
+}
+
+function add_new_field(field) {
+	// insert new field after current field
+	let index = 0;
+	if (props.field) {
+		index = props.column.fields.indexOf(props.field);
+	}
+	props.column.fields.splice(index + 1, 0, field);
+	store.form.selected_field = field.df;
+	show.value = false;
+	emit("update_parent");
+}
+
+watch(selected, (val) => {
+	if (!val) show.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.drop-down {
+	z-index: 100;
+}
+</style>
diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index 54dd49d5bf..109e3534bd 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -1,15 +1,17 @@
 <script setup>
 import draggable from "vuedraggable";
 import Field from "./Field.vue";
+import AddFieldButton from "./AddFieldButton.vue";
 import EditableInput from "./EditableInput.vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useStore } from "../store";
 import { move_children_to_parent, confirm_dialog } from "../utils";
 
 const props = defineProps(["section", "column"]);
-let store = useStore();
+const store = useStore();
 
-let hovered = ref(false);
+const hovered = ref(false);
+const selected = computed(() => store.selected(props.column.df.name));
 
 function add_column() {
 	// insert new column after the current column
@@ -29,7 +31,11 @@ function remove_column() {
 	} else {
 		confirm_dialog(
 			__("Delete Column", null, "Title of confirmation dialog"),
-			__("Are you sure you want to delete the column? All the fields in the column will be moved to the previous column.", null, "Confirmation dialog message"),
+			__(
+				"Are you sure you want to delete the column? All the fields in the column will be moved to the previous column.",
+				null,
+				"Confirmation dialog message"
+			),
 			() => delete_column(),
 			__("Delete column", null, "Button text"),
 			() => delete_column(true),
@@ -95,21 +101,14 @@ function move_columns_to_section() {
 
 <template>
 	<div
-		:class="[
-			'column',
-			hovered ? 'hovered' : '',
-			store.selected(column.df.name) ? 'selected' : ''
-		]"
+		:class="['column', selected ? 'selected' : hovered ? 'hovered' : '']"
 		:title="column.df.fieldname"
 		@click.stop="store.form.selected_field = column.df"
 		@mouseover.stop="hovered = true"
 		@mouseout.stop="hovered = false"
 	>
 		<div
-			:class="[
-				'column-header',
-				column.df.label ? 'has-label' : '',
-			]"
+			:class="['column-header', column.df.label ? 'has-label' : '']"
 			:hidden="!column.df.label && store.read_only"
 		>
 			<div class="column-label">
@@ -120,6 +119,9 @@ function move_columns_to_section() {
 				/>
 			</div>
 			<div class="column-actions">
+				<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
+					<div v-html="frappe.utils.icon('add', 'sm')"></div>
+				</button>
 				<button
 					v-if="section.columns.indexOf(column)"
 					class="btn btn-xs btn-icon"
@@ -128,9 +130,6 @@ function move_columns_to_section() {
 				>
 					<div v-html="frappe.utils.icon('move', 'sm')"></div>
 				</button>
-				<button class="btn btn-xs btn-icon" :title="__('Add Column')" @click="add_column">
-					<div v-html="frappe.utils.icon('add', 'sm')"></div>
-				</button>
 				<button
 					class="btn btn-xs btn-icon"
 					:title="__('Remove Column')"
@@ -145,7 +144,6 @@ function move_columns_to_section() {
 		</div>
 		<draggable
 			class="column-container"
-			:style="{ backgroundColor: column.fields.length ? '' : 'var(--field-placeholder-color)' }"
 			v-model="column.fields"
 			group="fields"
 			:animation="200"
@@ -161,11 +159,19 @@ function move_columns_to_section() {
 				/>
 			</template>
 		</draggable>
+		<div
+			class="empty-column"
+			:hidden="store.read_only"
+			:style="store.selected(column.df.name) ? { top: '35px' } : { top: 0 }"
+		>
+			<AddFieldButton :column="column" />
+		</div>
 	</div>
 </template>
 
 <style lang="scss" scoped>
 .column {
+	position: relative;
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -250,6 +256,35 @@ function move_columns_to_section() {
 		flex: 1;
 		min-height: 2rem;
 		border-radius: var(--border-radius);
+		z-index: 1;
+
+		&:empty {
+			& + .empty-column {
+				display: flex;
+				justify-content: center;
+				flex-direction: column;
+				align-items: center;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				gap: 5px;
+				width: 100%;
+				padding: 15px;
+
+				button {
+					background-color: var(--bg-color);
+					z-index: 2;
+
+					&:hover {
+						background-color: var(--btn-default-hover-bg);
+					}
+				}
+			}
+		}
+
+		& + .empty-column {
+			display: none;
+		}
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 6c0d1bb76e..63cd568f76 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -1,75 +1,19 @@
 <script setup>
 import EditableInput from "./EditableInput.vue";
-import Dropdown from "./Dropdown.vue";
 import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
-import { createPopper } from "@popperjs/core";
-import { ref, computed, watch } from "vue";
+import { ref, computed } from "vue";
+import AddFieldButton from "./AddFieldButton.vue";
 
 const props = defineProps(["column", "field"]);
 const store = useStore();
 
 const hovered = ref(false);
+const selected = computed(() => store.selected(props.field.df.name));
 const component = computed(() => {
 	return props.field.df.fieldtype.replace(" ", "") + "Control";
 });
 
-const show_fieldtype_dropdown = ref(false);
-const search_text = ref("");
-const fields = computed(() => {
-	let fields = frappe.model.all_fieldtypes
-		.filter((df) => {
-			if (in_list(frappe.model.layout_fields, df)) {
-				return false;
-			}
-			if (search_text.value) {
-				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
-					return true;
-				}
-				return false;
-			} else {
-				return true;
-			}
-		})
-		.map((df) => {
-			let out = {
-				label: df,
-				onClick: () => {
-					let new_field = {
-						df: store.get_df(df),
-						table_columns: [],
-					};
-
-					add_new_field(clone_field(new_field));
-				},
-			};
-			return out;
-		});
-	return [...fields];
-});
-
-const add_field_btn_ref = ref(null);
-const dropdown_ref = ref(null);
-const popper = ref(null);
-
-function setupPopper() {
-	if (!popper.value) {
-		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
-			placement: "bottom-end",
-			modifiers: [
-				{
-					name: "offset",
-					options: {
-						offset: [0, 4],
-					},
-				},
-			],
-		});
-	} else {
-		popper.value.update();
-	}
-}
-
 function remove_field() {
 	if (store.is_customize_form && props.field.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
@@ -111,36 +55,11 @@ function duplicate_field() {
 	props.column.fields.splice(index + 1, 0, duplicate_field);
 	store.form.selected_field = duplicate_field.df;
 }
-
-function add_new_field(field) {
-	// insert new field after current field
-	let index = props.column.fields.indexOf(props.field);
-	props.column.fields.splice(index + 1, 0, field);
-	store.form.selected_field = field.df;
-	show_fieldtype_dropdown.value = false;
-	hovered.value = false;
-}
-
-function toggle_fieldtype_dropdown() {
-	show_fieldtype_dropdown.value = !show_fieldtype_dropdown.value;
-	search_text.value = "";
-	setupPopper();
-}
-
-watch(hovered, (val) => {
-	if (val && store.form.selected_field && store.form.selected_field != props.field.df) {
-		show_fieldtype_dropdown.value = false;
-	}
-});
 </script>
 
 <template>
 	<div
-		:class="[
-			'field',
-			hovered ? 'hovered' : '',
-			store.selected(field.df.name) ? 'selected' : '',
-		]"
+		:class="['field', selected ? 'selected' : hovered ? 'hovered' : '']"
 		:title="field.df.fieldname"
 		@click.stop="store.form.selected_field = field.df"
 		@mouseover.stop="hovered = true"
@@ -170,20 +89,13 @@ watch(hovered, (val) => {
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
-					<button
-						ref="add_field_btn_ref"
-						class="add-field-btn btn btn-xs btn-icon"
-						@click="toggle_fieldtype_dropdown"
+					<AddFieldButton
+						:column="column"
+						:field="field"
+						@update_parent="hovered = false"
 					>
 						<div v-html="frappe.utils.icon('add', 'sm')" />
-						<div class="drop-down" ref="dropdown_ref">
-							<Dropdown
-								v-if="show_fieldtype_dropdown"
-								:items="fields"
-								v-model="search_text"
-							/>
-						</div>
-					</button>
+					</AddFieldButton>
 					<button
 						v-if="column.fields.indexOf(field)"
 						class="btn btn-xs btn-icon"
@@ -194,10 +106,18 @@ watch(hovered, (val) => {
 					>
 						<div v-html="frappe.utils.icon('move', 'sm')"></div>
 					</button>
-					<button class="btn btn-xs btn-icon" @click.stop="duplicate_field">
+					<button
+						class="btn btn-xs btn-icon"
+						:title="__('Duplicate field')"
+						@click.stop="duplicate_field"
+					>
 						<div v-html="frappe.utils.icon('duplicate', 'sm')"></div>
 					</button>
-					<button class="btn btn-xs btn-icon" @click.stop="remove_field">
+					<button
+						class="btn btn-xs btn-icon"
+						:title="__('Remove field')"
+						@click.stop="remove_field"
+					>
 						<div v-html="frappe.utils.icon('remove', 'sm')"></div>
 					</button>
 				</div>
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index cd675e5958..b9ffc7b7f4 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -122,6 +122,13 @@ function move_sections_to_tab() {
 					></div>
 				</div>
 				<div class="section-actions" :hidden="store.read_only">
+					<button
+						class="btn btn-xs btn-section"
+						:title="__('Add section above')"
+						@click="add_section_above"
+					>
+						<div v-html="frappe.utils.icon('add', 'sm')"></div>
+					</button>
 					<button
 						v-if="tab.sections.indexOf(section)"
 						class="btn btn-xs btn-section"
@@ -130,13 +137,6 @@ function move_sections_to_tab() {
 					>
 						<div v-html="frappe.utils.icon('move', 'sm')"></div>
 					</button>
-					<button
-						class="btn btn-xs btn-section"
-						:title="__('Add section above')"
-						@click="add_section_above"
-					>
-						<div v-html="frappe.utils.icon('add', 'sm')"></div>
-					</button>
 					<button
 						class="btn btn-xs btn-section"
 						:title="__('Remove section')"
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 588f570aca..88851ec4f9 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -289,13 +289,14 @@ function delete_tab(with_children) {
 		position: relative;
 
 		&.active {
-			display: block;
+			display: flex;
 		}
 
 		.tab-content-container {
+			flex: 1;
 			min-height: 4rem;
-			background-color: var(--field-placeholder-color);
 			border-radius: var(--border-radius);
+			z-index: 1;
 
 			&:empty {
 				height: 7rem;
@@ -305,14 +306,16 @@ function delete_tab(with_children) {
 					display: flex;
 					flex-direction: column;
 					align-items: center;
+					justify-content: center;
 					position: absolute;
 					top: 0;
+					bottom: 0;
 					gap: 5px;
 					width: 100%;
 					padding: 15px;
 
-					&button:hover {
-						background-color: var(--border-color);
+					button {
+						z-index: 2;
 					}
 				}
 			}

From 6a626318bef292a11f17708de6ea53af792fa05d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 01:39:47 +0530
Subject: [PATCH 16/39] fix: teleport dropdown outside to handle clipping

---
 frappe/public/js/form_builder/FormBuilder.vue        |  1 +
 .../js/form_builder/components/AddFieldButton.vue    | 12 +++++++-----
 .../public/js/form_builder/components/Dropdown.vue   |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index f18c0f9719..a779097c6a 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -41,6 +41,7 @@ onMounted(() => store.fetch());
 			</div>
 		</div>
 	</div>
+	<div id="drop-down-area" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index 79728a4f0f..fb52a1dcd8 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -8,9 +8,11 @@
 		<slot>
 			{{ __("Add a field") }}
 		</slot>
-		<div class="drop-down" ref="dropdown_ref">
-			<Dropdown v-if="show" :items="fields" v-model="search_text" />
-		</div>
+		<Teleport to="#drop-down-area">
+			<div class="drop-down" ref="dropdown_ref">
+				<Dropdown v-if="show" :items="fields" v-model="search_text" />
+			</div>
+		</Teleport>
 	</button>
 </template>
 
@@ -19,7 +21,7 @@ import Dropdown from "./Dropdown.vue";
 import { useStore } from "../store";
 import { clone_field } from "../utils";
 import { createPopper } from "@popperjs/core";
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
 const store = useStore();
 
@@ -100,7 +102,7 @@ function setupPopper() {
 function toggle_fieldtype_dropdown() {
 	show.value = !show.value;
 	search_text.value = "";
-	setTimeout(() => setupPopper());
+	nextTick(() => setupPopper());
 }
 
 function add_new_field(field) {
diff --git a/frappe/public/js/form_builder/components/Dropdown.vue b/frappe/public/js/form_builder/components/Dropdown.vue
index 6a5c9347d5..9cf3bd3c64 100644
--- a/frappe/public/js/form_builder/components/Dropdown.vue
+++ b/frappe/public/js/form_builder/components/Dropdown.vue
@@ -91,7 +91,7 @@ onMounted(() => {
 	.search-icon {
 		position: absolute;
 		left: 13px;
-		top: 11px;
+		top: 8px;
 	}
 }
 </style>

From 8956bbd3ec33e02420165d71aee4c6818703b947 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 02:03:11 +0530
Subject: [PATCH 17/39] chore: hide tab actions in preview mode

---
 frappe/public/js/form_builder/FormBuilder.vue        | 2 --
 frappe/public/js/form_builder/components/Section.vue | 3 ---
 frappe/public/js/form_builder/components/Sidebar.vue | 2 +-
 frappe/public/js/form_builder/components/Tabs.vue    | 1 +
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index a779097c6a..2c61ce1535 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -172,8 +172,6 @@ onMounted(() => store.fetch());
 	}
 
 	:deep(.preview) {
-		--field-placeholder-color: var(--fg-bg-color);
-
 		.tab,
 		.column,
 		.field {
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index b9ffc7b7f4..cdb9a87d12 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -156,9 +156,6 @@ function move_sections_to_tab() {
 			>
 				<draggable
 					class="section-columns-container"
-					:style="{
-						backgroundColor: section.columns.length ? null : 'var(--field-placeholder-color)'
-					}"
 					v-model="section.columns"
 					group="columns"
 					item-key="id"
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 6c084186e2..1683237ae7 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -40,7 +40,7 @@ function resize(e) {
 	<div class="sidebar-container" :style="{ width: `${sidebar_width}px` }">
 		<FieldProperties v-if="store.form.selected_field" />
 		<div class="default-state" v-else>
-			<div class="actions" v-if="store.form.layout.tabs.length == 1">
+			<div class="actions" v-if="store.form.layout.tabs.length == 1 && !store.read_only">
 				<button
 					class="new-tab-btn btn btn-default btn-xs"
 					:title="__('Add new tab')"
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 88851ec4f9..b5b03e7ece 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -127,6 +127,7 @@ function delete_tab(with_children) {
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
 						@click.stop="remove_tab"
+						:hidden="store.read_only"
 					>
 						<div v-html="frappe.utils.icon('remove', 'xs')"></div>
 					</button>

From 441e11549336fd9eae5d8d3c088d50cfb6089dbb Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 02:05:55 +0530
Subject: [PATCH 18/39] chore: hide fields table in customize form

---
 frappe/custom/doctype/customize_form/customize_form.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frappe/custom/doctype/customize_form/customize_form.json b/frappe/custom/doctype/customize_form/customize_form.json
index 8d4d194338..32fd3302ec 100644
--- a/frappe/custom/doctype/customize_form/customize_form.json
+++ b/frappe/custom/doctype/customize_form/customize_form.json
@@ -180,6 +180,7 @@
    "depends_on": "doc_type",
    "fieldname": "fields_section_break",
    "fieldtype": "Section Break",
+   "hidden": 1,
    "label": "Fields"
   },
   {
@@ -393,7 +394,7 @@
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2023-08-29 12:31:55.808848",
+ "modified": "2023-10-31 02:04:25.955931",
  "modified_by": "Administrator",
  "module": "Custom",
  "name": "Customize Form",

From 787515bf89578899a0a3607edfa034449ba2ecc4 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 02:14:54 +0530
Subject: [PATCH 19/39] chore: add a boilerplate section on creating new
 doctype

---
 frappe/core/doctype/doctype/doctype_list.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frappe/core/doctype/doctype/doctype_list.js b/frappe/core/doctype/doctype/doctype_list.js
index 4afa45c8c3..5efc507d4d 100644
--- a/frappe/core/doctype/doctype/doctype_list.js
+++ b/frappe/core/doctype/doctype/doctype_list.js
@@ -90,12 +90,7 @@ frappe.listview_settings["DocType"] = {
 								write: 1,
 							},
 						],
-						fields: [
-							{
-								label: "Title",
-								fieldtype: "Data",
-							},
-						],
+						fields: [{ fieldtype: "Section Break" }, { fieldtype: "Column Break" }],
 					})
 					.then((doc) => {
 						frappe.set_route("Form", "DocType", doc.name);

From c31161a564a6db812dbc432b4e5b99372be7af8e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 02:15:19 +0530
Subject: [PATCH 20/39] chore: Only show add section button if there is no tabs

---
 frappe/public/js/form_builder/components/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index b5b03e7ece..a9e48c4670 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -173,8 +173,8 @@ function delete_tab(with_children) {
 				</template>
 			</draggable>
 			<div class="empty-tab" :hidden="store.read_only">
-				<div>{{ __("Drag & Drop a section here from another tab") }}</div>
-				<div>{{ __("OR") }}</div>
+				<div v-if="has_tabs">{{ __("Drag & Drop a section here from another tab") }}</div>
+				<div v-if="has_tabs">{{ __("OR") }}</div>
 				<button class="btn btn-default btn-sm" @click="add_new_section">
 					{{ __("Add a new section") }}
 				</button>

From 55a57164a2320f00a564bbe3756fe1e834f712e8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 02:25:35 +0530
Subject: [PATCH 21/39] fix: delete passed tab not current tab

---
 .../js/form_builder/components/Tabs.vue       | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index a9e48c4670..f0db319aa8 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -40,14 +40,14 @@ function is_current_tab_empty() {
 	);
 }
 
-function remove_tab() {
+function remove_tab(tab) {
 	if (store.is_customize_form && store.current_tab.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
 		throw "cannot delete standard field";
 	} else if (store.has_standard_field(store.current_tab)) {
-		delete_tab();
+		delete_tab(tab);
 	} else if (is_current_tab_empty()) {
-		delete_tab(true);
+		delete_tab(tab, true);
 	} else {
 		confirm_dialog(
 			__("Delete Tab", null, "Title of confirmation dialog"),
@@ -56,30 +56,30 @@ function remove_tab() {
 				null,
 				"Confirmation dialog message"
 			),
-			() => delete_tab(),
+			() => delete_tab(tab),
 			__("Delete tab", null, "Button text"),
-			() => delete_tab(true),
+			() => delete_tab(tab, true),
 			__("Delete entire tab with sections", null, "Button text")
 		);
 	}
 }
 
-function delete_tab(with_children) {
+function delete_tab(tab, with_children) {
 	let tabs = store.form.layout.tabs;
-	let index = tabs.indexOf(store.current_tab);
+	let index = tabs.indexOf(tab);
 
 	if (!with_children) {
 		if (index > 0) {
 			let prev_tab = tabs[index - 1];
 			if (!is_current_tab_empty()) {
 				// move all sections from current tab to previous tab
-				prev_tab.sections = [...prev_tab.sections, ...store.current_tab.sections];
+				prev_tab.sections = [...prev_tab.sections, ...tab.sections];
 			}
 		} else {
 			// create a new tab and push sections to it
 			tabs.unshift({
 				df: store.get_df("Tab Break", "", __("Details")),
-				sections: store.current_tab.sections,
+				sections: tab.sections,
 				is_first: true,
 			});
 			index++;
@@ -126,7 +126,7 @@ function delete_tab(with_children) {
 					<button
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
-						@click.stop="remove_tab"
+						@click.stop="remove_tab(element)"
 						:hidden="store.read_only"
 					>
 						<div v-html="frappe.utils.icon('remove', 'xs')"></div>

From 0e397d6f6a799c5c4cf2af218546b489b4628c44 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 11:50:56 +0530
Subject: [PATCH 22/39] fix: minor fixes

---
 frappe/core/doctype/doctype/doctype_list.js                   | 2 +-
 frappe/public/js/form_builder/components/AddFieldButton.vue   | 4 ++--
 .../components/{Dropdown.vue => Autocomplete.vue}             | 0
 frappe/public/js/form_builder/components/Field.vue            | 4 ----
 frappe/public/js/form_builder/components/Sidebar.vue          | 2 +-
 frappe/public/js/form_builder/components/Tabs.vue             | 2 +-
 frappe/public/js/form_builder/utils.js                        | 4 ----
 7 files changed, 5 insertions(+), 13 deletions(-)
 rename frappe/public/js/form_builder/components/{Dropdown.vue => Autocomplete.vue} (100%)

diff --git a/frappe/core/doctype/doctype/doctype_list.js b/frappe/core/doctype/doctype/doctype_list.js
index 5efc507d4d..b5f610468d 100644
--- a/frappe/core/doctype/doctype/doctype_list.js
+++ b/frappe/core/doctype/doctype/doctype_list.js
@@ -90,7 +90,7 @@ frappe.listview_settings["DocType"] = {
 								write: 1,
 							},
 						],
-						fields: [{ fieldtype: "Section Break" }, { fieldtype: "Column Break" }],
+						fields: [{ fieldtype: "Section Break" }],
 					})
 					.then((doc) => {
 						frappe.set_route("Form", "DocType", doc.name);
diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index fb52a1dcd8..cb88860f91 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -10,14 +10,14 @@
 		</slot>
 		<Teleport to="#drop-down-area">
 			<div class="drop-down" ref="dropdown_ref">
-				<Dropdown v-if="show" :items="fields" v-model="search_text" />
+				<Autocomplete v-if="show" :items="fields" v-model="search_text" />
 			</div>
 		</Teleport>
 	</button>
 </template>
 
 <script setup>
-import Dropdown from "./Dropdown.vue";
+import Autocomplete from "./Autocomplete.vue";
 import { useStore } from "../store";
 import { clone_field } from "../utils";
 import { createPopper } from "@popperjs/core";
diff --git a/frappe/public/js/form_builder/components/Dropdown.vue b/frappe/public/js/form_builder/components/Autocomplete.vue
similarity index 100%
rename from frappe/public/js/form_builder/components/Dropdown.vue
rename to frappe/public/js/form_builder/components/Autocomplete.vue
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 63cd568f76..99730c15d4 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -187,8 +187,4 @@ function duplicate_field() {
 		}
 	}
 }
-
-.drop-down {
-	z-index: 99999;
-}
 </style>
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 1683237ae7..7b493ed13e 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -46,7 +46,7 @@ function resize(e) {
 					:title="__('Add new tab')"
 					@click="store.add_new_tab"
 				>
-					{{ __("+ Add tab") }}
+					{{ __("Add tab") }}
 				</button>
 			</div>
 			<div class="empty-state">
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index f0db319aa8..7ef8c91944 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -142,7 +142,7 @@ function delete_tab(tab, with_children) {
 				@click="add_new_tab"
 			>
 				<div class="add-btn-text">
-					{{ __("+ Add tab") }}
+					{{ __("Add tab") }}
 				</div>
 			</button>
 		</div>
diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js
index 91e0ad2cb8..28e17354bf 100644
--- a/frappe/public/js/form_builder/utils.js
+++ b/frappe/public/js/form_builder/utils.js
@@ -242,10 +242,6 @@ export function section_boilerplate() {
 				df: store.get_df("Column Break"),
 				fields: [],
 			},
-			{
-				df: store.get_df("Column Break"),
-				fields: [],
-			},
 		],
 	};
 }

From 748ffbe4e4169f3cd360b5509835ceb14326df3c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 11:55:03 +0530
Subject: [PATCH 23/39] chore: merge Details & Settings tab into Settings tab

---
 frappe/core/doctype/doctype/doctype.json | 52 +++++++++++-------------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/frappe/core/doctype/doctype/doctype.json b/frappe/core/doctype/doctype/doctype.json
index 388050bd24..13b4681420 100644
--- a/frappe/core/doctype/doctype/doctype.json
+++ b/frappe/core/doctype/doctype/doctype.json
@@ -12,7 +12,7 @@
   "form_builder",
   "fields_section",
   "fields",
-  "details_tab",
+  "settings_tab",
   "sb0",
   "module",
   "is_submittable",
@@ -37,28 +37,6 @@
   "column_break_15",
   "description",
   "documentation",
-  "sb2",
-  "permissions",
-  "restrict_to_domain",
-  "read_only",
-  "in_create",
-  "actions_section",
-  "actions",
-  "links_section",
-  "links",
-  "document_states_section",
-  "states",
-  "web_view",
-  "has_web_view",
-  "allow_guest_to_view",
-  "index_web_pages_for_search",
-  "route",
-  "is_published_field",
-  "website_search_field",
-  "advanced",
-  "engine",
-  "migration_hash",
-  "settings_tab",
   "form_settings_section",
   "image_field",
   "timeline_field",
@@ -93,6 +71,27 @@
   "email_append_to",
   "sender_field",
   "subject_field",
+  "sb2",
+  "permissions",
+  "restrict_to_domain",
+  "read_only",
+  "in_create",
+  "actions_section",
+  "actions",
+  "links_section",
+  "links",
+  "document_states_section",
+  "states",
+  "web_view",
+  "has_web_view",
+  "allow_guest_to_view",
+  "index_web_pages_for_search",
+  "route",
+  "is_published_field",
+  "website_search_field",
+  "advanced",
+  "engine",
+  "migration_hash",
   "connections_tab"
  ],
  "fields": [
@@ -663,11 +662,6 @@
    "fieldtype": "Tab Break",
    "label": "Connections",
    "show_dashboard": 1
-  },
-  {
-   "fieldname": "details_tab",
-   "fieldtype": "Tab Break",
-   "label": "Details"
   }
  ],
  "icon": "fa fa-bolt",
@@ -750,7 +744,7 @@
    "link_fieldname": "reference_doctype"
   }
  ],
- "modified": "2023-10-30 13:55:51.156211",
+ "modified": "2023-10-31 11:53:53.766322",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",

From b345ad5fe01a34369ebcf714950803cfe6e1bf34 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:05:30 +0530
Subject: [PATCH 24/39] fix: focus on fields label after adding it

---
 .../js/form_builder/components/EditableInput.vue     | 12 +++++++-----
 frappe/public/js/form_builder/components/Field.vue   |  6 +++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
index 21b517af3b..11ebb10a3f 100644
--- a/frappe/public/js/form_builder/components/EditableInput.vue
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -5,13 +5,13 @@ let store = useStore();
 
 const props = defineProps({
 	text: {
-		type: String
+		type: String,
 	},
 	placeholder: {
-		default: __("No Label")
+		default: __("No Label"),
 	},
 	empty_label: {
-		default: __("No Label")
+		default: __("No Label"),
 	},
 });
 
@@ -35,6 +35,8 @@ function focus_on_label() {
 		nextTick(() => input_text.value.focus());
 	}
 }
+
+defineExpose({ focus_on_label });
 </script>
 
 <template>
@@ -48,12 +50,12 @@ function focus_on_label() {
 			:placeholder="placeholder"
 			:value="text"
 			:style="{ width: hidden_span_width }"
-			@input="event => $emit('update:modelValue', event.target.value)"
+			@input="(event) => $emit('update:modelValue', event.target.value)"
 			@keydown.enter="editing = false"
 			@blur="editing = false"
 			@click.stop
 		/>
-		<span v-else-if="text" v-html="text" ></span>
+		<span v-else-if="text" v-html="text"></span>
 		<i v-else class="text-muted">
 			{{ empty_label }}
 		</i>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 99730c15d4..f96055aba7 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -2,12 +2,13 @@
 import EditableInput from "./EditableInput.vue";
 import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
 import AddFieldButton from "./AddFieldButton.vue";
 
 const props = defineProps(["column", "field"]);
 const store = useStore();
 
+const label_input = ref(null);
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.field.df.name));
 const component = computed(() => {
@@ -55,6 +56,8 @@ function duplicate_field() {
 	props.column.fields.splice(index + 1, 0, duplicate_field);
 	store.form.selected_field = duplicate_field.df;
 }
+
+onMounted(() => label_input.value.focus_on_label());
 </script>
 
 <template>
@@ -74,6 +77,7 @@ function duplicate_field() {
 			<template #label>
 				<div class="field-label">
 					<EditableInput
+						ref="label_input"
 						:text="field.df.label"
 						:placeholder="__('Label')"
 						:empty_label="`${__('No Label')} (${field.df.fieldtype})`"

From 3df24c70608e1836078315ac7a47b5f7815f3982 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:15:35 +0530
Subject: [PATCH 25/39] fix: move autocomplete popup on bottom-start

---
 frappe/public/js/form_builder/components/AddFieldButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index cb88860f91..c9495e9b1e 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -84,7 +84,7 @@ const popper = ref(null);
 function setupPopper() {
 	if (!popper.value) {
 		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
-			placement: "bottom-end",
+			placement: "bottom-start",
 			modifiers: [
 				{
 					name: "offset",

From c45306e92393e3cfc8616d5d537e173e603f09ac Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:26:47 +0530
Subject: [PATCH 26/39] chore: spacing

---
 frappe/public/js/form_builder/FormBuilder.vue            | 4 ++--
 .../js/form_builder/components/FieldProperties.vue       | 9 ++++++---
 frappe/public/js/form_builder/components/Sidebar.vue     | 2 +-
 frappe/public/js/form_builder/components/Tabs.vue        | 2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index 2c61ce1535..12a1a965c3 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -46,7 +46,7 @@ onMounted(() => store.fetch());
 
 <style lang="scss" scoped>
 .form-builder-container {
-	margin: -12px -20px -5px;
+	margin: -15px -20px -5px;
 	display: flex;
 
 	&.resizing {
@@ -269,7 +269,7 @@ onMounted(() => store.fetch());
 	}
 
 	.form-main > :deep(div:first-child:not(.tab-header)) {
-		max-height: calc(100vh - 178px);
+		max-height: calc(100vh - 175px);
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/FieldProperties.vue b/frappe/public/js/form_builder/components/FieldProperties.vue
index af32a53193..7132bfeba9 100644
--- a/frappe/public/js/form_builder/components/FieldProperties.vue
+++ b/frappe/public/js/form_builder/components/FieldProperties.vue
@@ -71,7 +71,7 @@ let docfield_df = computed(() => {
 	<div class="header">
 		<SearchBox class="flex-1" v-model="search_text" />
 		<button
-			class="btn btn-xs"
+			class="close-btn btn btn-xs"
 			:title="__('Close properties')"
 			@click="store.form.selected_field = null"
 		>
@@ -100,11 +100,14 @@ let docfield_df = computed(() => {
 .header {
 	display: flex;
 	padding: 5px;
-	gap: 5px;
 	border-bottom: 1px solid var(--border-color);
+
+	.close-btn {
+		margin-right: -5px;
+	}
 }
 .control-data {
-	height: calc(100vh - 205px);
+	height: calc(100vh - 202px);
 	overflow-y: auto;
 	padding: 8px;
 
diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index 7b493ed13e..1ae9c0f66a 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -122,7 +122,7 @@ function resize(e) {
 .default-state {
 	display: flex;
 	flex-direction: column;
-	height: calc(100vh - 166px);
+	height: calc(100vh - 163px);
 
 	.actions {
 		padding: 5px;
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 7ef8c91944..718097aad4 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -279,7 +279,7 @@ function delete_tab(tab, with_children) {
 }
 
 .tab-contents {
-	max-height: calc(100vh - 220px);
+	max-height: calc(100vh - 217px);
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-radius: var(--border-radius);

From 58bf248bb8a8c5d135b48be2dd5b8d50723b6846 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:36:11 +0530
Subject: [PATCH 27/39] chore: do not focus on label if form builder is loaded

---
 frappe/public/js/form_builder/components/Field.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index f96055aba7..3b8a0dd6cb 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -57,7 +57,7 @@ function duplicate_field() {
 	store.form.selected_field = duplicate_field.df;
 }
 
-onMounted(() => label_input.value.focus_on_label());
+onMounted(() => selected.value && label_input.value.focus_on_label());
 </script>
 
 <template>

From 747cd8ced4d0f17cffc33395c38793172362fda5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:39:51 +0530
Subject: [PATCH 28/39] chore: added bg color to form-container

---
 frappe/public/js/form_builder/FormBuilder.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index 12a1a965c3..193bfd315c 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -60,6 +60,7 @@ onMounted(() => store.fetch());
 
 	.form-container {
 		flex: 1;
+		background-color: var(--disabled-control-bg);
 	}
 
 	.form-sidebar {

From 456cdae3b067208d1393857771c8b619ad233552 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 12:59:32 +0530
Subject: [PATCH 29/39] chore: show add tab button always

---
 frappe/public/js/form_builder/components/Tabs.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 718097aad4..00191a08b7 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -195,12 +195,6 @@ function delete_tab(tab, with_children) {
 	border-top-left-radius: var(--border-radius);
 	border-top-right-radius: var(--border-radius);
 
-	&:hover {
-		.tab-actions .btn {
-			opacity: 1 !important;
-		}
-	}
-
 	.tabs {
 		display: flex;
 		flex: 1;
@@ -212,7 +206,7 @@ function delete_tab(tab, with_children) {
 		margin-right: 20px;
 
 		.btn {
-			opacity: 0;
+			background-color: var(--control-bg);
 			padding: 2px;
 			margin-left: 4px;
 			box-shadow: none;
@@ -222,7 +216,7 @@ function delete_tab(tab, with_children) {
 			}
 
 			&:hover {
-				background-color: var(--border-color);
+				background-color: var(--btn-default-hover-bg);
 			}
 		}
 

From d95b3b6fb06c7e06ecf226889af189f38f9b503a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 20:28:31 +0530
Subject: [PATCH 30/39] feat: created autocomplete component to control options
 with up/down key

---
 frappe/public/js/form_builder/FormBuilder.vue |   2 +-
 .../components/AddFieldButton.vue             |  70 +++----
 .../form_builder/components/Autocomplete.vue  | 182 ++++++++++++------
 .../form_builder/components/EditableInput.vue |   1 -
 .../js/form_builder/components/Field.vue      |   6 +-
 package.json                                  |   3 +-
 yarn.lock                                     |   5 +
 7 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/frappe/public/js/form_builder/FormBuilder.vue b/frappe/public/js/form_builder/FormBuilder.vue
index 193bfd315c..ff9cb9bdd4 100644
--- a/frappe/public/js/form_builder/FormBuilder.vue
+++ b/frappe/public/js/form_builder/FormBuilder.vue
@@ -41,7 +41,7 @@ onMounted(() => store.fetch());
 			</div>
 		</div>
 	</div>
-	<div id="drop-down-area" />
+	<div id="autocomplete-area" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index c9495e9b1e..28727f6075 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -3,14 +3,22 @@
 		ref="add_field_btn_ref"
 		class="add-field-btn btn btn-xs btn-icon"
 		:title="__('Add field')"
-		@click="toggle_fieldtype_dropdown"
+		@click.stop="toggle_fieldtype_options"
 	>
 		<slot>
 			{{ __("Add a field") }}
 		</slot>
-		<Teleport to="#drop-down-area">
-			<div class="drop-down" ref="dropdown_ref">
-				<Autocomplete v-if="show" :items="fields" v-model="search_text" />
+		<Teleport to="#autocomplete-area">
+			<div class="autocomplete" ref="autocomplete_ref">
+				<div v-show="show">
+					<Autocomplete
+						v-model:show="show"
+						:value="autocomplete_value"
+						:options="fields"
+						@change="add_new_field"
+						placeholder="Search fieldtypes..."
+					/>
+				</div>
 			</div>
 		</Teleport>
 	</button>
@@ -22,6 +30,7 @@ import { useStore } from "../store";
 import { clone_field } from "../utils";
 import { createPopper } from "@popperjs/core";
 import { computed, nextTick, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 const store = useStore();
 
@@ -36,7 +45,7 @@ const props = defineProps({
 	},
 });
 
-const emit = defineEmits(["update:modelValue", "update_parent"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const selected = computed(() => {
 	let fieldname = props.field ? props.field.df.name : props.column.df.name;
@@ -44,46 +53,31 @@ const selected = computed(() => {
 });
 
 const show = ref(false);
-const search_text = ref("");
+const autocomplete_value = ref("");
 const fields = computed(() => {
 	let fields = frappe.model.all_fieldtypes
 		.filter((df) => {
 			if (in_list(frappe.model.layout_fields, df)) {
 				return false;
 			}
-			if (search_text.value) {
-				if (df.toLowerCase().includes(search_text.value.toLowerCase())) {
-					return true;
-				}
-				return false;
-			} else {
-				return true;
-			}
+			return true;
 		})
 		.map((df) => {
-			let out = {
-				label: df,
-				onClick: () => {
-					let new_field = {
-						df: store.get_df(df),
-						table_columns: [],
-					};
-
-					add_new_field(clone_field(new_field));
-				},
-			};
+			let out = { label: df };
 			return out;
 		});
 	return [...fields];
 });
 
 const add_field_btn_ref = ref(null);
-const dropdown_ref = ref(null);
+const autocomplete_ref = ref(null);
 const popper = ref(null);
 
+onClickOutside(add_field_btn_ref, () => (show.value = false), { ignore: [autocomplete_ref] });
+
 function setupPopper() {
 	if (!popper.value) {
-		popper.value = createPopper(add_field_btn_ref.value, dropdown_ref.value, {
+		popper.value = createPopper(add_field_btn_ref.value, autocomplete_ref.value, {
 			placement: "bottom-start",
 			modifiers: [
 				{
@@ -99,22 +93,32 @@ function setupPopper() {
 	}
 }
 
-function toggle_fieldtype_dropdown() {
+function toggle_fieldtype_options() {
 	show.value = !show.value;
-	search_text.value = "";
+	autocomplete_value.value = "";
 	nextTick(() => setupPopper());
 }
 
 function add_new_field(field) {
+	fieldtype = field?.label;
+
+	if (!fieldtype) return;
+
+	let new_field = {
+		df: store.get_df(fieldtype),
+		table_columns: [],
+	};
+
+	let cloned_field = clone_field(new_field);
+
 	// insert new field after current field
 	let index = 0;
 	if (props.field) {
 		index = props.column.fields.indexOf(props.field);
 	}
-	props.column.fields.splice(index + 1, 0, field);
-	store.form.selected_field = field.df;
+	props.column.fields.splice(index + 1, 0, cloned_field);
+	store.form.selected_field = cloned_field.df;
 	show.value = false;
-	emit("update_parent");
 }
 
 watch(selected, (val) => {
@@ -123,7 +127,7 @@ watch(selected, (val) => {
 </script>
 
 <style lang="scss" scoped>
-.drop-down {
+.autocomplete {
 	z-index: 100;
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/Autocomplete.vue b/frappe/public/js/form_builder/components/Autocomplete.vue
index 9cf3bd3c64..2ded948e27 100644
--- a/frappe/public/js/form_builder/components/Autocomplete.vue
+++ b/frappe/public/js/form_builder/components/Autocomplete.vue
@@ -1,97 +1,159 @@
 <template>
-	<div class="drop-down">
-		<div class="search-box">
-			<input
-				ref="searchInput"
-				class="search-input form-control"
-				type="text"
-				:placeholder="__('Search field...')"
-				@input="(event) => $emit('update:modelValue', event.target.value)"
-				:value="modelValue"
-				@click.stop
-			/>
-			<span class="search-icon">
-				<div v-html="frappe.utils.icon('search', 'sm')"></div>
-			</span>
-		</div>
-		<div class="drop-down-list">
-			<button
-				class="btn drop-down-item"
-				v-for="(item, i) in items"
-				:key="i"
-				@click.stop="(i) => item.onClick(i)"
-			>
-				<slot>{{ item.label }}</slot>
-			</button>
-		</div>
-	</div>
+	<Combobox v-model="selectedValue" nullable>
+		<ComboboxOptions class="combo-box-options" static>
+			<div class="search-box">
+				<ComboboxInput
+					ref="search"
+					class="search-input form-control"
+					type="text"
+					@change="(e) => (query = e.target.value)"
+					:value="query"
+					:placeholder="props.placeholder"
+					autocomplete="off"
+					@click.stop
+				/>
+				<button class="clear-button btn btn-sm" @click="clear_search">
+					<div v-html="frappe.utils.icon('close', 'sm')" />
+				</button>
+			</div>
+			<div class="combo-box-items">
+				<ComboboxOption
+					as="template"
+					v-for="(field, i) in filteredOptions"
+					:key="i"
+					:value="field"
+					v-slot="{ active }"
+				>
+					<li :class="['combo-box-option', active ? 'active' : '']">
+						{{ field.label }}
+					</li>
+				</ComboboxOption>
+			</div>
+		</ComboboxOptions>
+	</Combobox>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from "@headlessui/vue";
+import { computed, ref, useAttrs, watch, nextTick } from "vue";
 
 const props = defineProps({
-	items: {
+	options: {
 		type: Array,
-		required: true,
+		default: [],
+	},
+	placeholder: {
+		type: String,
+		default: "",
 	},
 	modelValue: {
 		type: String,
 		default: "",
 	},
+	show: {
+		type: Boolean,
+		default: false,
+	},
 });
 
-const searchInput = ref(null);
+const emit = defineEmits(["update:modelValue", "update:show", "change"]);
+const attrs = useAttrs();
 
-onMounted(() => {
-	searchInput.value.focus();
+const query = ref(null);
+const search = ref(null);
+
+const showOptions = computed({
+	get() {
+		return props.show;
+	},
+	set(val) {
+		emit("update:show", val);
+	},
+});
+
+const selectedValue = computed({
+	get() {
+		return attrs.value;
+	},
+	set(val) {
+		query.value = "";
+		if (val) {
+			showOptions.value = false;
+		}
+		emit("change", val);
+	},
+});
+
+const filteredOptions = computed(() => {
+	return query.value
+		? props.options.filter((option) => {
+				return option.label.toLowerCase().includes(query.value.toLowerCase());
+		  })
+		: props.options;
+});
+
+function clear_search() {
+	selectedValue.value = "";
+	search.value.el.focus();
+}
+
+watch(showOptions, (val) => {
+	if (val) {
+		nextTick(() => {
+			search.value.el.focus();
+		});
+	}
 });
 </script>
 
 <style lang="scss" scoped>
-.drop-down {
-	display: inline-block;
-	background-color: var(--fg-color);
-	box-shadow: var(--shadow-base) !important;
-	border-radius: var(--border-radius-sm);
-	top: 30px;
-	right: 0;
-	width: 170px;
-	z-index: 99999999;
+.combo-box {
+	z-index: 100;
 }
 
-.drop-down-list {
-	overflow-y: auto;
-	max-height: 250px;
-	text-align: left;
-	padding: 0 6px 6px;
+.combo-box-options {
+	width: 100%;
+	background-color: var(--white);
+	border-radius: var(--border-radius-lg);
+	box-shadow: var(--shadow-2xl);
+	padding: 0;
 }
 
-.drop-down-item {
+.combo-box-option {
 	font-size: small;
 	text-align: left;
 	border-radius: var(--border-radius-sm);
-	margin: 1px 0px;
+	padding: 6px 10px;
 	width: 100%;
 
-	&:hover {
+	&:hover,
+	&.active {
 		background-color: var(--bg-light-gray);
 	}
 }
 
-.search-box {
-	padding: 6px;
-	.search-input {
-		padding-left: 30px;
-		font-size: small;
-		width: 100% !important;
-		background-color: var(--control-bg) !important;
-	}
+.combo-box-items {
+	max-height: 200px;
+	padding: 5px;
+	padding-top: 0px;
+	overflow-y: auto;
+}
 
-	.search-icon {
+.search-box {
+	position: relative;
+	padding: 6px;
+	.clear-button {
 		position: absolute;
-		left: 13px;
-		top: 8px;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+	.search-input {
+		width: 100%;
 	}
 }
 </style>
diff --git a/frappe/public/js/form_builder/components/EditableInput.vue b/frappe/public/js/form_builder/components/EditableInput.vue
index 11ebb10a3f..34593460ee 100644
--- a/frappe/public/js/form_builder/components/EditableInput.vue
+++ b/frappe/public/js/form_builder/components/EditableInput.vue
@@ -72,7 +72,6 @@ defineExpose({ focus_on_label });
 
 	&:focus {
 		outline: none;
-		border-radius: var(--border-radius);
 		background-color: inherit;
 	}
 
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 3b8a0dd6cb..c38a6961e8 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -93,11 +93,7 @@ onMounted(() => selected.value && label_input.value.focus_on_label());
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
-					<AddFieldButton
-						:column="column"
-						:field="field"
-						@update_parent="hovered = false"
-					>
+					<AddFieldButton :column="column" :field="field">
 						<div v-html="frappe.utils.icon('add', 'sm')" />
 					</AddFieldButton>
 					<button
diff --git a/package.json b/package.json
index 63907dee69..e545f5e601 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,10 @@
   },
   "homepage": "https://frappeframework.com",
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
     "@editorjs/editorjs": "^2.26.3",
     "@frappe/esbuild-plugin-postcss2": "^0.1.3",
+    "@headlessui/vue": "^1.7.16",
+    "@popperjs/core": "^2.11.2",
     "@redis/client": "^1.5.8",
     "@vue-flow/background": "^1.1.0",
     "@vue-flow/core": "^1.16.2",
diff --git a/yarn.lock b/yarn.lock
index 1acca7916f..7b128fdb54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,6 +55,11 @@
     stylus "^0.x"
     tmp "^0.2.1"
 
+"@headlessui/vue@^1.7.16":
+  version "1.7.16"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.16.tgz#bdc9d32d329248910325539b99e6abfce0c69f89"
+  integrity sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==
+
 "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"

From ca2152d56c2b2620fa002d27be0a67f3d00e927c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 20:51:41 +0530
Subject: [PATCH 31/39] feat: ctrl+shift+n to add new field & delete/backspace
 to delete the field when it in on focus

---
 .../components/AddFieldButton.vue             |  2 ++
 .../js/form_builder/components/Field.vue      | 20 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frappe/public/js/form_builder/components/AddFieldButton.vue b/frappe/public/js/form_builder/components/AddFieldButton.vue
index 28727f6075..885ccc77d8 100644
--- a/frappe/public/js/form_builder/components/AddFieldButton.vue
+++ b/frappe/public/js/form_builder/components/AddFieldButton.vue
@@ -124,6 +124,8 @@ function add_new_field(field) {
 watch(selected, (val) => {
 	if (!val) show.value = false;
 });
+
+defineExpose({ open: toggle_fieldtype_options });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index c38a6961e8..5d78cbc7ef 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -4,10 +4,28 @@ import { useStore } from "../store";
 import { move_children_to_parent, clone_field } from "../utils";
 import { ref, computed, onMounted } from "vue";
 import AddFieldButton from "./AddFieldButton.vue";
+import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["column", "field"]);
 const store = useStore();
 
+const add_field_ref = ref(null);
+
+// cmd/ctrl + shift + n to open the add field autocomplete
+const { ctrl_shift_n, Backspace } = useMagicKeys();
+whenever(ctrl_shift_n, (value) => {
+	if (value && selected.value) {
+		add_field_ref.value.open();
+	}
+});
+
+// delete/backspace to delete the field
+whenever(Backspace, (value) => {
+	if (value && selected.value) {
+		remove_field();
+	}
+});
+
 const label_input = ref(null);
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.field.df.name));
@@ -93,7 +111,7 @@ onMounted(() => selected.value && label_input.value.focus_on_label());
 			</template>
 			<template #actions>
 				<div class="field-actions" :hidden="store.read_only">
-					<AddFieldButton :column="column" :field="field">
+					<AddFieldButton ref="add_field_ref" :column="column" :field="field">
 						<div v-html="frappe.utils.icon('add', 'sm')" />
 					</AddFieldButton>
 					<button

From 4955a90f5518ee426e5aa6ba1aff2039d87fef59 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 21:05:33 +0530
Subject: [PATCH 32/39] fix: click on + button to add field and press enter tab
 will be deleted

---
 frappe/public/js/form_builder/components/Tabs.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 00191a08b7..410c02b235 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -6,10 +6,11 @@ import { section_boilerplate, confirm_dialog } from "../utils";
 import draggable from "vuedraggable";
 import { ref, computed } from "vue";
 
-let store = useStore();
+const store = useStore();
 
-let dragged = ref(false);
-let has_tabs = computed(() => store.form.layout.tabs.length > 1);
+const remove_tab_btn = ref(null);
+const dragged = ref(false);
+const has_tabs = computed(() => store.form.layout.tabs.length > 1);
 store.form.active_tab = store.form.layout.tabs[0].df.name;
 
 function activate_tab(tab) {
@@ -41,6 +42,9 @@ function is_current_tab_empty() {
 }
 
 function remove_tab(tab) {
+	// is remove_tab_btn is not visible then return
+	if (!remove_tab_btn.value?.offsetParent) return;
+
 	if (store.is_customize_form && store.current_tab.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
 		throw "cannot delete standard field";
@@ -124,6 +128,7 @@ function delete_tab(tab, with_children) {
 						v-model="element.df.label"
 					/>
 					<button
+						ref="remove_tab_btn"
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
 						@click.stop="remove_tab(element)"

From afdfc5cdddd48135ea91235566140e424cae6677 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 31 Oct 2023 21:16:06 +0530
Subject: [PATCH 33/39] fix: delete/backspace to delete tab/section/column if
 selected

---
 .../js/form_builder/components/Column.vue     |  9 ++++
 .../js/form_builder/components/Section.vue    | 44 +++++++++++++------
 .../js/form_builder/components/Tabs.vue       | 16 +++++--
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index 109e3534bd..394b2738ad 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -6,10 +6,19 @@ import EditableInput from "./EditableInput.vue";
 import { computed, ref } from "vue";
 import { useStore } from "../store";
 import { move_children_to_parent, confirm_dialog } from "../utils";
+import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["section", "column"]);
 const store = useStore();
 
+// delete/backspace to delete the field
+const { Backspace } = useMagicKeys();
+whenever(Backspace, (value) => {
+	if (value && selected.value) {
+		remove_column();
+	}
+});
+
 const hovered = ref(false);
 const selected = computed(() => store.selected(props.column.df.name));
 
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index cdb9a87d12..a9da99ca3e 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -2,15 +2,25 @@
 import draggable from "vuedraggable";
 import Column from "./Column.vue";
 import EditableInput from "./EditableInput.vue";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useStore } from "../store";
 import { section_boilerplate, move_children_to_parent, confirm_dialog } from "../utils";
+import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["tab", "section"]);
-let store = useStore();
+const store = useStore();
 
-let hovered = ref(false);
-let collapsed = ref(false);
+// delete/backspace to delete the field
+const { Backspace } = useMagicKeys();
+whenever(Backspace, (value) => {
+	if (value && selected.value) {
+		remove_section();
+	}
+});
+
+const hovered = ref(false);
+const collapsed = ref(false);
+const selected = computed(() => store.selected(props.section.df.name));
 
 function add_section_above() {
 	let index = props.tab.sections.indexOf(props.section);
@@ -19,7 +29,7 @@ function add_section_above() {
 
 function is_section_empty() {
 	return !props.section.columns.some(
-		column => (store.is_customize_form && !column.df.is_custom_field) || column.fields.length
+		(column) => (store.is_customize_form && !column.df.is_custom_field) || column.fields.length
 	);
 }
 
@@ -34,11 +44,15 @@ function remove_section() {
 	} else {
 		confirm_dialog(
 			__("Delete Section", null, "Title of confirmation dialog"),
-			__("Are you sure you want to delete the section? All the columns along with fields in the section will be moved to the previous section.", null, "Confirmation dialog message"),
+			__(
+				"Are you sure you want to delete the section? All the columns along with fields in the section will be moved to the previous section.",
+				null,
+				"Confirmation dialog message"
+			),
 			() => delete_section(),
 			__("Delete section", null, "Button text"),
 			() => delete_section(true),
-			__("Delete entire section with columns", null, "Button text")
+			__("Delete entire section with fields", null, "Button text")
 		);
 	}
 }
@@ -94,7 +108,7 @@ function move_sections_to_tab() {
 			:class="[
 				'form-section',
 				hovered ? 'hovered' : '',
-				store.selected(section.df.name) ? 'selected' : ''
+				store.selected(section.df.name) ? 'selected' : '',
 			]"
 			:title="section.df.fieldname"
 			@click.stop="select_section"
@@ -105,7 +119,7 @@ function move_sections_to_tab() {
 				:class="[
 					'section-header',
 					section.df.label || section.df.collapsible ? 'has-label' : '',
-					collapsed ? 'collapsed' : ''
+					collapsed ? 'collapsed' : '',
 				]"
 				:hidden="!section.df.label && store.read_only"
 			>
@@ -118,7 +132,7 @@ function move_sections_to_tab() {
 					<div
 						v-if="section.df.collapsible"
 						class="collapse-indicator"
-						v-html="frappe.utils.icon( collapsed ? 'down' : 'up-line', 'sm' )"
+						v-html="frappe.utils.icon(collapsed ? 'down' : 'up-line', 'sm')"
 					></div>
 				</div>
 				<div class="section-actions" :hidden="store.read_only">
@@ -132,7 +146,9 @@ function move_sections_to_tab() {
 					<button
 						v-if="tab.sections.indexOf(section)"
 						class="btn btn-xs btn-section"
-						:title="__('Move the current section and the following sections to a new tab')"
+						:title="
+							__('Move the current section and the following sections to a new tab')
+						"
 						@click="move_sections_to_tab"
 					>
 						<div v-html="frappe.utils.icon('move', 'sm')"></div>
@@ -146,12 +162,14 @@ function move_sections_to_tab() {
 					</button>
 				</div>
 			</div>
-			<div v-if="section.df.description" class="section-description">{{ section.df.description }}</div>
+			<div v-if="section.df.description" class="section-description">
+				{{ section.df.description }}
+			</div>
 			<div
 				class="section-columns"
 				:class="{
 					hidden: section.df.collapsible && collapsed,
-					'has-one-column': section.columns.length === 1
+					'has-one-column': section.columns.length === 1,
 				}"
 			>
 				<draggable
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 410c02b235..4da3f7603a 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -5,11 +5,21 @@ import { useStore } from "../store";
 import { section_boilerplate, confirm_dialog } from "../utils";
 import draggable from "vuedraggable";
 import { ref, computed } from "vue";
+import { useMagicKeys, whenever } from "@vueuse/core";
 
 const store = useStore();
 
+// delete/backspace to delete the field
+const { Backspace } = useMagicKeys();
+whenever(Backspace, (value) => {
+	if (value && selected.value) {
+		remove_tab(store.current_tab, true);
+	}
+});
+
 const remove_tab_btn = ref(null);
 const dragged = ref(false);
+const selected = computed(() => store.selected(store.current_tab.df.name));
 const has_tabs = computed(() => store.form.layout.tabs.length > 1);
 store.form.active_tab = store.form.layout.tabs[0].df.name;
 
@@ -41,9 +51,9 @@ function is_current_tab_empty() {
 	);
 }
 
-function remove_tab(tab) {
+function remove_tab(tab, force=false) {
 	// is remove_tab_btn is not visible then return
-	if (!remove_tab_btn.value?.offsetParent) return;
+	if (!remove_tab_btn.value?.offsetParent && !force) return;
 
 	if (store.is_customize_form && store.current_tab.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
@@ -63,7 +73,7 @@ function remove_tab(tab) {
 			() => delete_tab(tab),
 			__("Delete tab", null, "Button text"),
 			() => delete_tab(tab, true),
-			__("Delete entire tab with sections", null, "Button text")
+			__("Delete entire tab with fields", null, "Button text")
 		);
 	}
 }

From 211740315b3069855e5a5f516f774562a76ea7f7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 00:13:34 +0530
Subject: [PATCH 34/39] fix: do not delete tab/section/colum/field if pressing
 delete to edit properties or label

---
 frappe/public/js/form_builder/components/Column.vue  |  2 +-
 frappe/public/js/form_builder/components/Field.vue   |  2 +-
 frappe/public/js/form_builder/components/Section.vue |  2 +-
 frappe/public/js/form_builder/components/Tabs.vue    |  2 +-
 frappe/public/js/form_builder/store.js               | 12 +++++++++++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index 394b2738ad..814dbd0b9b 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -14,7 +14,7 @@ const store = useStore();
 // delete/backspace to delete the field
 const { Backspace } = useMagicKeys();
 whenever(Backspace, (value) => {
-	if (value && selected.value) {
+	if (value && selected.value && store.not_using_input) {
 		remove_column();
 	}
 });
diff --git a/frappe/public/js/form_builder/components/Field.vue b/frappe/public/js/form_builder/components/Field.vue
index 5d78cbc7ef..94cd5974d3 100644
--- a/frappe/public/js/form_builder/components/Field.vue
+++ b/frappe/public/js/form_builder/components/Field.vue
@@ -21,7 +21,7 @@ whenever(ctrl_shift_n, (value) => {
 
 // delete/backspace to delete the field
 whenever(Backspace, (value) => {
-	if (value && selected.value) {
+	if (value && selected.value && store.not_using_input) {
 		remove_field();
 	}
 });
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index a9da99ca3e..1b3ab49d94 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -13,7 +13,7 @@ const store = useStore();
 // delete/backspace to delete the field
 const { Backspace } = useMagicKeys();
 whenever(Backspace, (value) => {
-	if (value && selected.value) {
+	if (value && selected.value && store.not_using_input) {
 		remove_section();
 	}
 });
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 4da3f7603a..e7cf7e1305 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -12,7 +12,7 @@ const store = useStore();
 // delete/backspace to delete the field
 const { Backspace } = useMagicKeys();
 whenever(Backspace, (value) => {
-	if (value && selected.value) {
+	if (value && selected.value && store.not_using_input) {
 		remove_tab(store.current_tab, true);
 	}
 });
diff --git a/frappe/public/js/form_builder/store.js b/frappe/public/js/form_builder/store.js
index 8edb86896f..7636c2575e 100644
--- a/frappe/public/js/form_builder/store.js
+++ b/frappe/public/js/form_builder/store.js
@@ -6,7 +6,7 @@ import {
 	section_boilerplate,
 } from "./utils";
 import { computed, nextTick, ref } from "vue";
-import { useDebouncedRefHistory, onKeyDown } from "@vueuse/core";
+import { useDebouncedRefHistory, onKeyDown, useActiveElement } from "@vueuse/core";
 
 export const useStore = defineStore("form-builder-store", () => {
 	let doctype = ref("");
@@ -36,6 +36,15 @@ export const useStore = defineStore("form-builder-store", () => {
 		return form.value.layout.tabs.find((tab) => tab.df.name == form.value.active_tab);
 	});
 
+	const active_element = useActiveElement();
+	const not_using_input = computed(
+		() =>
+			active_element.value?.readOnly ||
+			active_element.value?.disabled ||
+			(active_element.value?.tagName !== "INPUT" &&
+				active_element.value?.tagName !== "TEXTAREA")
+	);
+
 	// Actions
 	function selected(name) {
 		return form.value.selected_field?.name == name;
@@ -340,6 +349,7 @@ export const useStore = defineStore("form-builder-store", () => {
 		get_animation,
 		get_docfields,
 		current_tab,
+		not_using_input,
 		selected,
 		get_df,
 		has_standard_field,

From 2522d6bfabbdb6b73341898d54136bea28a25075 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 00:33:04 +0530
Subject: [PATCH 35/39] fix: added is_tree & virtual doctype checkbox in new
 doctype dialog

---
 frappe/core/doctype/doctype/doctype_list.js | 139 +++++++++++---------
 1 file changed, 76 insertions(+), 63 deletions(-)

diff --git a/frappe/core/doctype/doctype/doctype_list.js b/frappe/core/doctype/doctype/doctype_list.js
index b5f610468d..963e863380 100644
--- a/frappe/core/doctype/doctype/doctype_list.js
+++ b/frappe/core/doctype/doctype/doctype_list.js
@@ -5,77 +5,90 @@ frappe.listview_settings["DocType"] = {
 
 	new_doctype_dialog() {
 		let non_developer = frappe.session.user !== "Administrator" || !frappe.boot.developer_mode;
+		let fields = [
+			{
+				label: __("DocType Name"),
+				fieldname: "name",
+				fieldtype: "Data",
+				reqd: 1,
+			},
+			{ fieldtype: "Column Break" },
+			{
+				label: __("Module"),
+				fieldname: "module",
+				fieldtype: "Link",
+				options: "Module Def",
+				reqd: 1,
+			},
+			{ fieldtype: "Section Break" },
+			{
+				label: __("Is Submittable"),
+				fieldname: "is_submittable",
+				fieldtype: "Check",
+				description: __(
+					"Once submitted, submittable documents cannot be changed. They can only be Cancelled and Amended."
+				),
+				depends_on: "eval:!doc.istable && !doc.issingle",
+			},
+			{
+				label: __("Is Child Table"),
+				fieldname: "istable",
+				fieldtype: "Check",
+				description: __("Child Tables are shown as a Grid in other DocTypes"),
+				depends_on: "eval:!doc.is_submittable && !doc.issingle",
+			},
+			{
+				label: __("Editable Grid"),
+				fieldname: "editable_grid",
+				fieldtype: "Check",
+				depends_on: "istable",
+				default: 1,
+			},
+			{
+				label: __("Is Single"),
+				fieldname: "issingle",
+				fieldtype: "Check",
+				description: __(
+					"Single Types have only one record no tables associated. Values are stored in tabSingles"
+				),
+				depends_on: "eval:!doc.istable && !doc.is_submittable",
+			},
+			{
+				label: "Is Tree",
+				fieldname: "is_tree",
+				fieldtype: "Check",
+				default: "0",
+				depends_on: "eval:!doc.istable",
+				description: "Tree structures are implemented using Nested Set",
+			},
+			{
+				label: __("Custom?"),
+				fieldname: "custom",
+				fieldtype: "Check",
+				default: non_developer,
+				read_only: non_developer,
+			},
+		];
+
+		if (!non_developer) {
+			fields.push({
+				label: "Is Virtual",
+				fieldname: "is_virtual",
+				fieldtype: "Check",
+				default: "0",
+			});
+		}
+
 		let new_d = new frappe.ui.Dialog({
 			title: __("Create New DocType"),
-			fields: [
-				{
-					label: __("DocType Name"),
-					fieldname: "doctype_name",
-					fieldtype: "Data",
-					reqd: 1,
-				},
-				{ fieldtype: "Column Break" },
-				{
-					label: __("Module"),
-					fieldname: "module",
-					fieldtype: "Link",
-					options: "Module Def",
-					reqd: 1,
-				},
-				{ fieldtype: "Section Break" },
-				{
-					label: __("Is Submittable"),
-					fieldname: "is_submittable",
-					fieldtype: "Check",
-					description: __(
-						"Once submitted, submittable documents cannot be changed. They can only be Cancelled and Amended."
-					),
-					depends_on: "eval:!doc.istable && !doc.issingle",
-				},
-				{
-					label: __("Is Child Table"),
-					fieldname: "istable",
-					fieldtype: "Check",
-					description: __("Child Tables are shown as a Grid in other DocTypes"),
-					depends_on: "eval:!doc.is_submittable && !doc.issingle",
-				},
-				{
-					label: __("Editable Grid"),
-					fieldname: "editable_grid",
-					fieldtype: "Check",
-					depends_on: "istable",
-					default: 1,
-				},
-				{
-					label: __("Is Single"),
-					fieldname: "issingle",
-					fieldtype: "Check",
-					description: __(
-						"Single Types have only one record no tables associated. Values are stored in tabSingles"
-					),
-					depends_on: "eval:!doc.istable && !doc.is_submittable",
-				},
-				{
-					label: __("Custom?"),
-					fieldname: "custom",
-					fieldtype: "Check",
-					default: non_developer,
-					read_only: non_developer,
-				},
-			],
+			fields: fields,
 			primary_action_label: __("Create & Continue"),
 			primary_action(values) {
 				if (!values.istable) values.editable_grid = 0;
 				frappe.db
 					.insert({
 						doctype: "DocType",
-						name: values.doctype_name,
-						module: values.module,
-						istable: values.istable,
-						editable_grid: values.editable_grid,
-						issingle: values.issingle,
-						custom: values.custom,
-						is_submittable: values.is_submittable,
+						...values,
 						permissions: [
 							{
 								create: 1,

From 0cf6eacc1c0627e83ea5b39e578b5bbee82c526f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 14:20:26 +0530
Subject: [PATCH 36/39] fix: added delay in draggable for touch devices
 scrolling will not be affected

---
 frappe/public/js/form_builder/components/Column.vue  | 3 ++-
 frappe/public/js/form_builder/components/Section.vue | 3 ++-
 frappe/public/js/form_builder/components/Tabs.vue    | 4 +++-
 frappe/public/js/form_builder/utils.js               | 4 ++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Column.vue b/frappe/public/js/form_builder/components/Column.vue
index 814dbd0b9b..10afe3f495 100644
--- a/frappe/public/js/form_builder/components/Column.vue
+++ b/frappe/public/js/form_builder/components/Column.vue
@@ -5,7 +5,7 @@ import AddFieldButton from "./AddFieldButton.vue";
 import EditableInput from "./EditableInput.vue";
 import { computed, ref } from "vue";
 import { useStore } from "../store";
-import { move_children_to_parent, confirm_dialog } from "../utils";
+import { move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils";
 import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["section", "column"]);
@@ -155,6 +155,7 @@ function move_columns_to_section() {
 			class="column-container"
 			v-model="column.fields"
 			group="fields"
+			:delay="is_touch_screen_device() ? 200 : 0"
 			:animation="200"
 			:easing="store.get_animation"
 			item-key="id"
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index 1b3ab49d94..9266d5c8d3 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -4,7 +4,7 @@ import Column from "./Column.vue";
 import EditableInput from "./EditableInput.vue";
 import { ref, computed } from "vue";
 import { useStore } from "../store";
-import { section_boilerplate, move_children_to_parent, confirm_dialog } from "../utils";
+import { section_boilerplate, move_children_to_parent, confirm_dialog, is_touch_screen_device } from "../utils";
 import { useMagicKeys, whenever } from "@vueuse/core";
 
 const props = defineProps(["tab", "section"]);
@@ -177,6 +177,7 @@ function move_sections_to_tab() {
 					v-model="section.columns"
 					group="columns"
 					item-key="id"
+					:delay="is_touch_screen_device() ? 200 : 0"
 					:animation="200"
 					:easing="store.get_animation"
 					:disabled="store.read_only"
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index e7cf7e1305..3946e93ee5 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -2,7 +2,7 @@
 import Section from "./Section.vue";
 import EditableInput from "./EditableInput.vue";
 import { useStore } from "../store";
-import { section_boilerplate, confirm_dialog } from "../utils";
+import { section_boilerplate, confirm_dialog, is_touch_screen_device } from "../utils";
 import draggable from "vuedraggable";
 import { ref, computed } from "vue";
 import { useMagicKeys, whenever } from "@vueuse/core";
@@ -117,6 +117,7 @@ function delete_tab(tab, with_children) {
 			class="tabs"
 			v-model="store.form.layout.tabs"
 			group="tabs"
+			:delay="is_touch_screen_device() ? 200 : 0"
 			:animation="200"
 			:easing="store.get_animation"
 			item-key="id"
@@ -174,6 +175,7 @@ function delete_tab(tab, with_children) {
 				class="tab-content-container"
 				v-model="tab.sections"
 				group="sections"
+				:delay="is_touch_screen_device() ? 200 : 0"
 				:animation="200"
 				:easing="store.get_animation"
 				item-key="id"
diff --git a/frappe/public/js/form_builder/utils.js b/frappe/public/js/form_builder/utils.js
index 28e17354bf..6856432c2a 100644
--- a/frappe/public/js/form_builder/utils.js
+++ b/frappe/public/js/form_builder/utils.js
@@ -347,3 +347,7 @@ export function confirm_dialog(
 	d.show();
 	d.set_message(message);
 }
+
+export function is_touch_screen_device() {
+	return "ontouchstart" in document.documentElement;
+}

From 0bfe196d0c97382870883756a2ec9d3bf32f80c9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 16:49:08 +0530
Subject: [PATCH 37/39] chore: keep fields table in settings tab at last

if you need to add multiple fields by copy paste from excel
---
 frappe/core/doctype/doctype/doctype.json | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frappe/core/doctype/doctype/doctype.json b/frappe/core/doctype/doctype/doctype.json
index 13b4681420..082471da7d 100644
--- a/frappe/core/doctype/doctype/doctype.json
+++ b/frappe/core/doctype/doctype/doctype.json
@@ -10,8 +10,6 @@
  "field_order": [
   "form_builder_tab",
   "form_builder",
-  "fields_section",
-  "fields",
   "settings_tab",
   "sb0",
   "module",
@@ -92,6 +90,8 @@
   "advanced",
   "engine",
   "migration_hash",
+  "fields_section",
+  "fields",
   "connections_tab"
  ],
  "fields": [
@@ -654,7 +654,6 @@
    "collapsible": 1,
    "fieldname": "fields_section",
    "fieldtype": "Section Break",
-   "hidden": 1,
    "label": "Fields"
   },
   {
@@ -744,7 +743,7 @@
    "link_fieldname": "reference_doctype"
   }
  ],
- "modified": "2023-10-31 11:53:53.766322",
+ "modified": "2023-11-01 16:45:14.960949",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "DocType",

From a32f34a5d721f8d7d26c05b46fb99a3f72009a21 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 18:09:13 +0530
Subject: [PATCH 38/39] test: fixed failing form builder UI test

---
 cypress/integration/form_builder.js | 55 +++++++++++++++++------------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/cypress/integration/form_builder.js b/cypress/integration/form_builder.js
index 53c45cd379..10a41820f9 100644
--- a/cypress/integration/form_builder.js
+++ b/cypress/integration/form_builder.js
@@ -56,12 +56,18 @@ context("Form Builder", () => {
 		cy.visit(`/app/doctype/${doctype_name}`);
 		cy.findByRole("tab", { name: "Form" }).click();
 
-		let first_field =
-			".tab-content.active .section-columns-container:first .column:first .field:first";
+		let first_column = ".tab-content.active .section-columns-container:first .column:first";
 
-		cy.get(".fields-container .field[title='Table']").drag(first_field, {
-			target: { x: 100, y: 10 },
-		});
+		let first_field = first_column + " .field:first";
+		let last_field = first_column + " .field:last";
+
+		let add_new_field_btn = first_field + " .field-actions .add-field-btn";
+
+		// add new field
+		cy.get(add_new_field_btn).click();
+
+		// type table and press enter
+		cy.get(".combo-box-options:first .search-box > input").type("table{enter}");
 
 		// save
 		cy.click_doc_primary_button("Save");
@@ -70,7 +76,7 @@ context("Form Builder", () => {
 		cy.get_open_dialog().find(".msgprint").should("contain", "Options is required");
 		cy.hide_dialog();
 
-		cy.get(first_field).click({ force: true });
+		cy.get(last_field).click({ force: true });
 
 		cy.get(".sidebar-container .frappe-control[data-fieldname='options'] input")
 			.click()
@@ -78,13 +84,10 @@ context("Form Builder", () => {
 		cy.get("@input").clear({ force: true }).type("Web Form Field", { delay: 200 });
 		cy.wait("@search_link");
 
-		cy.get(first_field).click({ force: true });
+		cy.get(last_field).click({ force: true });
 
-		cy.get(first_field)
-			.find(".table-controls .table-column")
-			.contains("Field")
-			.should("exist");
-		cy.get(first_field)
+		cy.get(last_field).find(".table-controls .table-column").contains("Field").should("exist");
+		cy.get(last_field)
 			.find(".table-controls .table-column")
 			.contains("Fieldtype")
 			.should("exist");
@@ -98,7 +101,7 @@ context("Form Builder", () => {
 		cy.get_open_dialog().find(".msgprint").should("contain", "In List View");
 		cy.hide_dialog();
 
-		cy.get(first_field).click({ force: true });
+		cy.get(last_field).click({ force: true });
 		cy.get(".sidebar-container .field label .label-area").contains("In List View").click();
 
 		// validate In Global Search
@@ -188,7 +191,7 @@ context("Form Builder", () => {
 		// add new column
 		cy.get(first_section).find(".column:first").click(15, 10);
 		cy.get(first_section).find(".column:first .column-actions button:first").click();
-		cy.get(first_section).find(".column").should("have.length", 3);
+		cy.get(first_section).find(".column").should("have.length", 2);
 	});
 
 	it("Remove Tab/Section/Column", () => {
@@ -197,7 +200,7 @@ context("Form Builder", () => {
 		// remove column
 		cy.get(first_section).find(".column:first").click(15, 10);
 		cy.get(first_section).find(".column:first .column-actions button:last").click();
-		cy.get(first_section).find(".column").should("have.length", 2);
+		cy.get(first_section).find(".column").should("have.length", 1);
 
 		// remove section
 		cy.get(first_section).click(15, 10);
@@ -205,7 +208,7 @@ context("Form Builder", () => {
 		cy.get(".tab-content.active .form-section-container").should("have.length", 1);
 
 		// remove tab
-		cy.get(".tab-header").realHover().find(".tab-actions .remove-tab-btn").click();
+		cy.get(".tab-header .tab:last").realHover().find(".remove-tab-btn").click();
 		cy.get(".tab-header .tabs .tab").should("have.length", 2);
 	});
 
@@ -231,14 +234,20 @@ context("Form Builder", () => {
 		cy.visit(`/app/doctype/${doctype_name}`);
 		cy.findByRole("tab", { name: "Form" }).click();
 
-		let first_field =
-			".tab-content.active .section-columns-container:first .column:first .field:first";
+		let first_column = ".tab-content.active .section-columns-container:first .column:first";
 
-		cy.get(".fields-container .field[title='Data']").drag(first_field, {
-			target: { x: 100, y: 10 },
-		});
+		let first_field = first_column + " .field:first";
+		let last_field = first_column + " .field:last";
 
-		cy.get(first_field).click();
+		let add_new_field_btn = first_field + " .field-actions .add-field-btn";
+
+		// add new field
+		cy.get(add_new_field_btn).click();
+
+		// type data and press enter
+		cy.get(".combo-box-options:first .search-box > input").type("data{enter}");
+
+		cy.get(last_field).click();
 
 		// validate duplicate name
 		cy.get(".sidebar-container .frappe-control[data-fieldname='fieldname'] input")
@@ -251,7 +260,7 @@ context("Form Builder", () => {
 		cy.click_doc_primary_button("Save");
 		cy.get_open_dialog().find(".msgprint").should("contain", "appears multiple times");
 		cy.hide_dialog();
-		cy.get(first_field).click();
+		cy.get(last_field).click();
 		cy.get(".sidebar-container .frappe-control[data-fieldname='fieldname'] input").clear({
 			force: true,
 		});

From aa0e72decaf877a5fed5ffd97975d3b8d48928b8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 1 Nov 2023 18:40:19 +0530
Subject: [PATCH 39/39] fix: was not able to remove unselected tab

---
 .../public/js/form_builder/components/Tabs.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 3946e93ee5..66dfc0d87d 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -13,11 +13,10 @@ const store = useStore();
 const { Backspace } = useMagicKeys();
 whenever(Backspace, (value) => {
 	if (value && selected.value && store.not_using_input) {
-		remove_tab(store.current_tab, true);
+		remove_tab(store.current_tab, '', true);
 	}
 });
 
-const remove_tab_btn = ref(null);
 const dragged = ref(false);
 const selected = computed(() => store.selected(store.current_tab.df.name));
 const has_tabs = computed(() => store.form.layout.tabs.length > 1);
@@ -44,23 +43,23 @@ function add_new_section() {
 	store.form.selected_field = section.df;
 }
 
-function is_current_tab_empty() {
+function is_tab_empty(tab) {
 	// check if sections have columns and it contains fields
-	return !store.current_tab.sections.some((section) =>
+	return !tab.sections.some((section) =>
 		section.columns.some((column) => column.fields.length)
 	);
 }
 
-function remove_tab(tab, force=false) {
+function remove_tab(tab, event, force=false) {
 	// is remove_tab_btn is not visible then return
-	if (!remove_tab_btn.value?.offsetParent && !force) return;
+	if (!event?.currentTarget?.offsetParent && !force) return;
 
 	if (store.is_customize_form && store.current_tab.df.is_custom_field == 0) {
 		frappe.msgprint(__("Cannot delete standard field. You can hide it if you want"));
 		throw "cannot delete standard field";
 	} else if (store.has_standard_field(store.current_tab)) {
 		delete_tab(tab);
-	} else if (is_current_tab_empty()) {
+	} else if (is_tab_empty(tab)) {
 		delete_tab(tab, true);
 	} else {
 		confirm_dialog(
@@ -85,7 +84,7 @@ function delete_tab(tab, with_children) {
 	if (!with_children) {
 		if (index > 0) {
 			let prev_tab = tabs[index - 1];
-			if (!is_current_tab_empty()) {
+			if (!is_tab_empty(tab)) {
 				// move all sections from current tab to previous tab
 				prev_tab.sections = [...prev_tab.sections, ...tab.sections];
 			}
@@ -139,10 +138,9 @@ function delete_tab(tab, with_children) {
 						v-model="element.df.label"
 					/>
 					<button
-						ref="remove_tab_btn"
 						class="remove-tab-btn btn btn-xs"
 						:title="__('Remove tab')"
-						@click.stop="remove_tab(element)"
+						@click.stop="remove_tab(element, $event)"
 						:hidden="store.read_only"
 					>
 						<div v-html="frappe.utils.icon('remove', 'xs')"></div>