From 97a7e90e14e5eb181ded1c1fddabd61a5dbfade8 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchampfaris@users.noreply.github.com>
Date: Wed, 19 Jun 2019 12:15:17 +0530
Subject: [PATCH] fix(MultiSelectList): Trigger get_data on input (#7713)

---
 frappe/public/js/frappe/db.js                 | 16 ++++++
 .../frappe/form/controls/multiselect_list.js  | 53 +++++++++++++------
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frappe/public/js/frappe/db.js b/frappe/public/js/frappe/db.js
index 5e9689d886..1b6fb0e438 100644
--- a/frappe/public/js/frappe/db.js
+++ b/frappe/public/js/frappe/db.js
@@ -98,5 +98,21 @@ frappe.db = {
 				args: Object.assign(args, { doctype })
 			}).then(r => resolve(r.message));
 		});
+	},
+	get_link_options(doctype, txt = '', filters={}) {
+		return new Promise(resolve => {
+			frappe.call({
+				type: 'GET',
+				method: 'frappe.desk.search.search_link',
+				args: {
+					doctype,
+					txt,
+					filters
+				},
+				callback(r) {
+					resolve(r.results);
+				}
+			});
+		});
 	}
 };
diff --git a/frappe/public/js/frappe/form/controls/multiselect_list.js b/frappe/public/js/frappe/form/controls/multiselect_list.js
index 7862f125b3..e244c3c12e 100644
--- a/frappe/public/js/frappe/form/controls/multiselect_list.js
+++ b/frappe/public/js/frappe/form/controls/multiselect_list.js
@@ -18,6 +18,7 @@ frappe.ui.form.ControlMultiSelectList = frappe.ui.form.ControlData.extend({
 		this.$list_wrapper = $(template);
 		this.$input = $('<input>');
 		this.$list_wrapper.prependTo(this.input_area);
+		this.$filter_input = this.$list_wrapper.find('input');
 		this.$list_wrapper.on('click', '.dropdown-menu', e => {
 			e.stopPropagation();
 		});
@@ -25,21 +26,27 @@ frappe.ui.form.ControlMultiSelectList = frappe.ui.form.ControlData.extend({
 			let $target = $(e.currentTarget);
 			this.toggle_select_item($target);
 		});
-		this.$list_wrapper.on('input', 'input', e => {
-			let txt = e.target.value;
-			let filtered_options = this._options.filter(opt => {
-				let match = false;
-				if (this.values.includes(opt.value)) {
-					return true;
-				}
-				match = Awesomplete.FILTER_CONTAINS(opt.label, txt);
-				if (!match) {
-					match = Awesomplete.FILTER_CONTAINS(opt.value, txt);
-				}
-				return match;
-			});
-			this.set_selectable_items(filtered_options);
-		});
+		this.$list_wrapper.on('input', 'input', frappe.utils.debounce((e) => {
+			this.set_options()
+				.then(() => {
+					let txt = e.target.value;
+					let filtered_options = this._options.filter(opt => {
+						let match = false;
+						if (this.values.includes(opt.value)) {
+							return true;
+						}
+						match = Awesomplete.FILTER_CONTAINS(opt.label, txt);
+						if (!match) {
+							match = Awesomplete.FILTER_CONTAINS(opt.value, txt);
+						}
+						return match;
+					});
+					let options = this._selected_values
+						.concat(filtered_options)
+						.uniqBy(opt => opt.value);
+					this.set_selectable_items(options);
+				});
+		}, 300));
 		this.$list_wrapper.on('keydown', 'input', e => {
 			if (e.key === 'ArrowDown') {
 				this.highlight_item(1);
@@ -92,10 +99,23 @@ frappe.ui.form.ControlMultiSelectList = frappe.ui.form.ControlData.extend({
 		} else {
 			this.values = this.values.filter(val => val !== value);
 		}
+		this.update_selected_values(value);
 		this.parse_validate_and_set_in_model('');
 		this.update_status();
 	},
 
+	update_selected_values(value) {
+		this._selected_values = this._selected_values || [];
+		let option = this._options.find(opt => opt.value === value);
+		if (option) {
+			if (this.values.includes(value)) {
+				this._selected_values.push(option);
+			} else {
+				this._selected_values = this._selected_values.filter(opt => opt.value !== value);
+			}
+		}
+	},
+
 	update_status() {
 		let text;
 		if (this.values.length === 0) {
@@ -136,7 +156,8 @@ frappe.ui.form.ControlMultiSelectList = frappe.ui.form.ControlData.extend({
 		}
 
 		if (this.df.get_data) {
-			let value = this.df.get_data();
+			let txt = this.$filter_input.val();
+			let value = this.df.get_data(txt);
 			if (!value) {
 				this._options = [];
 			} else if (value.then) {