Merge pull request frappe#28507 from UmakanthKaspa/feature/multiselect-clear-all

Feat: Add Clear All Button to MultiSelect Field

Author: sumitbhanushali

frappe/public/js/frappe/form/controls/multiselect_list.js

@@ -14,6 +14,11 @@ frappe.ui.form.ControlMultiSelectList = class ControlMultiSelectList extends (
 					</li>
 					<div class="selectable-items">
 					</div>
+					<li class="text-right">
+						<button class="btn btn-primary btn-xs clear-selections text-nowrap">
+							Clear All
+    					</button>
+					</li>
 				</ul>
 			</div>
 		`;
@@ -31,6 +36,9 @@ frappe.ui.form.ControlMultiSelectList = class ControlMultiSelectList extends (
 		this.$list_wrapper.on("click", ".dropdown-menu", (e) => {
 			e.stopPropagation();
 		});
+		this.$list_wrapper.on("click", ".clear-selections", (e) => {
+			this.clear_all_selections();
+		});
 		this.$list_wrapper.on("click", ".selectable-item", (e) => {
 			let $target = $(e.currentTarget);
 			this.toggle_select_item($target);
@@ -115,6 +123,14 @@ frappe.ui.form.ControlMultiSelectList = class ControlMultiSelectList extends (
 		}
 	}
 
+	clear_all_selections() {
+		this.values = [];
+		this._selected_values = [];
+		this.update_status();
+		this.set_selectable_items(this._options);
+		this.parse_validate_and_set_in_model("");
+	}
+
 	toggle_select_item($selectable_item) {
 		$selectable_item.toggleClass("selected");
 		let value = decodeURIComponent($selectable_item.data().value);