fix: Anomalous behaviour of save button (bp #12326) (#12336)

Co-authored-by: Suraj Shetty <13928957+surajshetty3416@users.noreply.github.com>
Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>

frappe/public/js/frappe/form/controls/base_input.js

@@ -127,13 +127,6 @@ frappe.ui.form.ControlInput = frappe.ui.form.Control.extend({
 		let display_value = frappe.format(value, this.df, { no_icon: true, inline: true }, doc);
 		this.disp_area && $(this.disp_area).html(display_value);
 	},
-
-	bind_change_event: function() {
-		var me = this;
-		this.$input && this.$input.on("change", this.change || function(e) {
-			me.parse_validate_and_set_in_model(me.get_input_value(), e);
-		});
-	},
 	set_label: function(label) {
 		if(label) this.df.label = label;
 

frappe/public/js/frappe/form/controls/data.js

@@ -3,6 +3,7 @@ frappe.provide('frappe.phone_call');
 frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
 	html_element: "input",
 	input_type: "text",
+	trigger_change_on_input_event: true,
 	make_input: function() {
 		if(this.$input) return;
 
@@ -22,8 +23,20 @@ frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
 		this.has_input = true;
 		this.bind_change_event();
 		this.setup_autoname_check();
-		// somehow this event does not bubble up to document
-		// after v7, if you can debug, remove this
+	},
+	bind_change_event: function() {
+		const change_handler = e => {
+			if (this.change) this.change(e);
+			else {
+				let value = this.get_input_value();
+				this.parse_validate_and_set_in_model(value, e);
+			}
+		};
+		this.$input.on("change", change_handler);
+		if (this.trigger_change_on_input_event) {
+			// debounce to avoid repeated validations on value change
+			this.$input.on("input", frappe.utils.debounce(change_handler, 500));
+		}
 	},
 	setup_autoname_check: function() {
 		if (!this.df.parent) return;

frappe/public/js/frappe/form/controls/date.js

@@ -1,5 +1,5 @@
-
 frappe.ui.form.ControlDate = frappe.ui.form.ControlData.extend({
+	trigger_change_on_input_event: false,
 	make_input: function() {
 		this._super();
 		this.make_picker();

frappe/public/js/frappe/form/controls/link.js

@@ -9,6 +9,7 @@ import Awesomplete from 'awesomplete';
 frappe.ui.form.recent_link_validations = {};
 
 frappe.ui.form.ControlLink = frappe.ui.form.ControlData.extend({
+	trigger_change_on_input_event: false,
 	make_input: function() {
 		var me = this;
 		// line-height: 1 is for Mozilla 51, shows extra padding otherwise

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

@@ -564,13 +564,8 @@ frappe.ui.form.Form = class FrappeForm {
 		let me = this;
 		return new Promise((resolve, reject) => {
 			btn && $(btn).prop("disabled", true);
-			$(document.activeElement).blur();
-
 			frappe.ui.form.close_grid_form();
-			// let any pending js process finish
-			setTimeout(function() {
-				me.validate_and_save(save_action, callback, btn, on_error, resolve, reject);
-			}, 100);
+			me.validate_and_save(save_action, callback, btn, on_error, resolve, reject);
 		}).then(() => {
 			me.show_success_action();
 		}).catch((e) => {