feat: restore clear button in Link fields with system setting configuration

frappe/core/doctype/system_settings/system_settings.json

@@ -114,6 +114,8 @@
   "enable_telemetry",
   "search_section",
   "link_field_results_limit",
+  "column_break_nebx",
+  "allow_clearing_link_fields",
   "api_logging_section",
   "log_api_requests"
  ],
@@ -783,12 +785,23 @@
    "fieldname": "only_allow_system_managers_to_upload_public_files",
    "fieldtype": "Check",
    "label": "Only allow System Managers to upload public files"
+  },
+  {
+   "fieldname": "column_break_nebx",
+   "fieldtype": "Column Break"
+  },
+  {
+   "default": "0",
+   "description": "Adds a clear (\u00d7) button to Link fields, allowing users to quickly remove the selected value.",
+   "fieldname": "allow_clearing_link_fields",
+   "fieldtype": "Check",
+   "label": "Allow Clearing Link Fields"
   }
  ],
  "icon": "fa fa-cog",
  "issingle": 1,
  "links": [],
- "modified": "2026-03-28 23:46:03.614749",
+ "modified": "2026-04-14 16:26:19.634212",
  "modified_by": "Administrator",
  "module": "Core",
  "name": "System Settings",

frappe/core/doctype/system_settings/system_settings.py

@@ -18,6 +18,7 @@ class SystemSettings(Document):
 	if TYPE_CHECKING:
 		from frappe.types import DF
 
+		allow_clearing_link_fields: DF.Check
 		allow_consecutive_login_attempts: DF.Int
 		allow_error_traceback: DF.Check
 		allow_guests_to_upload_files: DF.Check

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

@@ -14,7 +14,10 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 		$(`<div class="link-field ui-front" style="position: relative;">
 			<input type="text" class="input-with-feedback form-control">
 			<span class="link-btn">
-				<a class="btn-open" tabIndex='-1' style="display: inline-flex;" title="${__("Open Link")}">
+				<a class="btn-clear" style="display: inline-block;" title="${__("Clear Link")}">
+					${frappe.utils.icon("close", "xs", "es-icon")}
+				</a>
+				<a class="btn-open" style="display: inline-flex;" title="${__("Open Link")}">
 					${frappe.utils.icon("arrow-right", "xs")}
 				</a>
 			</span>
@@ -22,8 +25,15 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 		this.$input_area = $(this.input_area);
 		this.$input = this.$input_area.find("input");
 		this.$link = this.$input_area.find(".link-btn");
+		this.$link_clear = this.$input_area.find(".btn-clear");
 		this.$link_open = this.$link.find(".btn-open");
 		this.set_input_attributes();
+
+		this.$link_clear.on("click", function () {
+			me.$link.toggle(false);
+			me.$input.val("").focus();
+		});
+
 		this.$input.on("focus", function () {
 			if (!me.$input.val()) {
 				me.$input.val("");
@@ -67,11 +77,17 @@ frappe.ui.form.ControlLink = class ControlLink extends frappe.ui.form.ControlDat
 			const name = this.get_input_value();
 			this.$link.toggle(true);
 			this.$link_open.attr("href", frappe.utils.get_form_link(doctype, name));
+			this.$link_clear.toggle(this.is_clear_button_enabled());
 		}
 	}
 
+	is_clear_button_enabled() {
+		return cint(frappe.boot?.sysdefaults?.show_clear_button_in_link_field);
+	}
+
 	hide_link_and_clear_buttons() {
 		this.$link.toggle(false);
+		this.$link_clear.toggle(false);
 	}
 
 	get_options() {

frappe/public/scss/common/controls.scss

@@ -201,10 +201,17 @@ select.form-control {
 		display: none;
 		border-radius: var(--border-radius-sm);
 		height: 100%;
+		white-space: nowrap;
 		a {
-			display: flex;
+			display: inline-flex;
 			height: 100%;
 			align-items: center;
+			vertical-align: middle;
+		}
+		.btn-clear {
+			&:hover {
+				color: var(--error-color);
+			}
 		}
 	}
 }