Merge pull request #17233 from surajshetty3416/fix-first-tab

fix(tabs): Set first visible tab as active

frappe/public/js/frappe/form/form.js

@@ -575,8 +575,6 @@ frappe.ui.form.Form = class FrappeForm {
 
 		this.$wrapper.trigger('render_complete');
 
-		this.layout.set_first_tab_as_active(switched || this.cscript.is_onload);
-
 		if(!this.hidden) {
 			this.layout.show_empty_form_message();
 		}
@@ -1842,6 +1840,15 @@ frappe.ui.form.Form = class FrappeForm {
 			});
 		});
 	}
+	set_active_tab(tab) {
+		if (!this.active_tab_map) {
+			this.active_tab_map = {};
+		}
+		this.active_tab_map[this.docname] = tab;
+	}
+	get_active_tab() {
+		return this.active_tab_map && this.active_tab_map[this.docname];
+	}
 };
 
 frappe.validated = 0;

frappe/public/js/frappe/form/layout.js

@@ -123,7 +123,7 @@ frappe.ui.form.Layout = class Layout {
 
 		if (this.is_tabbed_layout()) {
 			// add a tab without `fieldname` to avoid conflicts
-			let default_tab = {label: __('Details'), fieldtype: "Tab Break"};
+			let default_tab = {label: __('Details'), fieldtype: "Tab Break", fieldname: "__details"};
 			let first_tab = this.fields[1].fieldtype === "Tab Break" ? this.fields[1] : null;
 			if (!first_tab) {
 				this.fields.splice(1, 0, default_tab);
@@ -336,12 +336,17 @@ frappe.ui.form.Layout = class Layout {
 		if (visible_tabs && visible_tabs.length == 1) {
 			visible_tabs[0].parent.toggleClass('hide show');
 		}
+		this.set_tab_as_active();
 	}
 
-	set_first_tab_as_active(switched) {
-		if (this.tabs.length && (switched || !this.frm.active_tab)) {
+	set_tab_as_active() {
+		let frm_active_tab = this?.frm.get_active_tab?.();
+		if (frm_active_tab) {
+			frm_active_tab.set_active();
+		} else if (this.tabs.length) {
 			// set first tab as active when opening for first time, or new doc
-			this.tabs[0].set_active();
+			let first_visible_tab = this.tabs.find(tab => !tab.is_hidden());
+			first_visible_tab && first_visible_tab.set_active();
 		}
 	}
 

frappe/public/js/frappe/form/tab.js

@@ -10,6 +10,7 @@ export default class Tab {
 		this.fields_list = [];
 		this.fields_dict = {};
 		this.make();
+		this.setup_listeners();
 		this.refresh();
 	}
 
@@ -79,7 +80,6 @@ export default class Tab {
 	set_active() {
 		this.parent.find('.nav-link').tab('show');
 		this.wrapper.addClass('active');
-		this.frm.active_tab = this;
 	}
 
 	is_active() {
@@ -87,7 +87,12 @@ export default class Tab {
 	}
 
 	is_hidden() {
-		this.wrapper.hasClass('hide')
-			&& this.parent.hasClass('hide');
+		return this.wrapper.hasClass('hide');
+	}
+
+	setup_listeners() {
+		this.parent.find('.nav-link').on('shown.bs.tab', () => {
+			this?.frm.set_active_tab?.(this);
+		});
 	}
 }