From 3d4e2e99eee36df0eee9339216fab42fa56a5eae Mon Sep 17 00:00:00 2001
From: git-avc <avazquez@ctgalega.com>
Date: Sat, 29 Nov 2025 19:15:05 +0100
Subject: [PATCH] feat: let's use tabs on grid row form

---
 .../js/form_builder/components/Sidebar.vue    |  5 +---
 frappe/public/js/frappe/form/grid_row_form.js |  6 +++++
 frappe/public/js/frappe/form/layout.js        | 24 +++++++++++++++++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/form_builder/components/Sidebar.vue b/frappe/public/js/form_builder/components/Sidebar.vue
index c70321d316..11c65d57a1 100644
--- a/frappe/public/js/form_builder/components/Sidebar.vue
+++ b/frappe/public/js/form_builder/components/Sidebar.vue
@@ -40,10 +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 && !store.read_only && !store.doc.istable"
-			>
+			<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/frappe/form/grid_row_form.js b/frappe/public/js/frappe/form/grid_row_form.js
index 02ca2cb85c..53b03cf2d9 100644
--- a/frappe/public/js/frappe/form/grid_row_form.js
+++ b/frappe/public/js/frappe/form/grid_row_form.js
@@ -9,6 +9,9 @@ export default class GridRowForm {
 		this.form_area.empty();
 		frappe.utils.scroll_to(0, false, 0, this.wrapper.find(".grid-form-body"));
 
+		// Check if tabs exist in the docfields
+		const has_tabs = this.row.docfields.some((df) => df.fieldtype === "Tab Break");
+
 		this.layout = new frappe.ui.form.Layout({
 			fields: this.row.docfields,
 			body: this.form_area,
@@ -17,6 +20,9 @@ export default class GridRowForm {
 			grid: this.row.grid,
 			grid_row: this.row,
 			grid_row_form: this,
+			is_child_table: true,
+			doctype: this.row.grid.doctype,
+			doc: this.row.doc,
 		});
 		this.layout.make();
 
diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js
index 8f8b1da1fc..6c01740a9c 100644
--- a/frappe/public/js/frappe/form/layout.js
+++ b/frappe/public/js/frappe/form/layout.js
@@ -37,7 +37,12 @@ frappe.ui.form.Layout = class Layout {
 		}
 
 		this.frm && this.setup_tooltip_events();
-		this.render();
+
+		// Only render once during make()
+		if (!this.rendered) {
+			this.render();
+			this.rendered = true;
+		}
 	}
 
 	setup_tabbed_layout() {
@@ -160,7 +165,10 @@ frappe.ui.form.Layout = class Layout {
 			let first_tab =
 				first_field_visible?.fieldtype === "Tab Break" ? first_field_visible : null;
 
-			if (!first_tab) {
+			// Check if default tab already exists to prevent duplicates
+			let has_default_tab = this.fields.find((df) => df.fieldname === "__details");
+
+			if (!first_tab && !has_default_tab) {
 				this.fields.splice(0, 0, default_tab);
 			} else {
 				// reshuffle __newname field to accomodate under 1st Tab Break
@@ -448,6 +456,18 @@ frappe.ui.form.Layout = class Layout {
 			return;
 		}
 
+		// For child tables (grid row forms), don't use parent frm's active tab
+		// Always activate the first visible tab
+		if (this.is_child_table) {
+			if (this.tabs.length) {
+				let first_visible_tab = this.tabs.find((tab) => !tab.is_hidden());
+				if (first_visible_tab) {
+					first_visible_tab.set_active();
+				}
+			}
+			return;
+		}
+
 		let frm_active_tab = this.frm?.get_active_tab?.();
 		if (frm_active_tab) {
 			frm_active_tab.set_active();