From 182e6c41d0fbc6e3653f1a31e9055edf8dbd8b1a Mon Sep 17 00:00:00 2001
From: Martin Hristov <martin.r.hristov@gmail.com>
Date: Thu, 16 Sep 2021 11:44:22 +0300
Subject: [PATCH 1/2] fix(ui5-multi-combobox): revert selection after X button
 is pressed on mobile

- User can cancel its selection by pressing the close button of the dialog on mobile phone. In this case, selection will be reverted and no event will be called at all. If the OK button is pressed selection will replicate to tokens and fire event selection-change

FIXES: #3764
---
 packages/main/src/MultiComboBox.js         | 56 ++++++++++++++++++----
 packages/main/src/MultiComboBoxPopover.hbs |  8 ++--
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 18e37978b1ed..9af852d16e99 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -625,23 +625,38 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_listSelectionChange(event) {
-		event.target.items.forEach(item => {
-			this.items.forEach(mcbItem => {
-				if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
-					mcbItem.selected = item.selected;
-				}
-			});
-		});
 
-		this.fireSelectionChange();
+		// sync list items and cb items
+		this.syncItems(event.target.items);
+
+		// don't call selection change right after selection as user can cancel it on phone
+		if (!isPhone()) {
+			this.fireSelectionChange();
+		}
 
 		if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) {
 			this.allItemsPopover.close();
 			this.value = "";
+
+			// if the item (not checkbox) is clicked, call the selection change
+			if (isPhone()) {
+				this.fireSelectionChange();
+			}
+
 			this.fireEvent("input");
 		}
 	}
 
+	syncItems(listItems) {
+		listItems.forEach(item => {
+			this.items.forEach(mcbItem => {
+				if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
+					mcbItem.selected = item.selected;
+				}
+			});
+		});
+	}
+
 	fireSelectionChange() {
 		this.fireEvent("selection-change", { items: this._getSelectedItems() });
 		// Angular 2 way data binding
@@ -697,6 +712,15 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_beforeOpen() {
+		this._itemsBeforeOpen = this.items.map(item => {
+			return {
+				ref: item,
+				selected: item.selected
+			};
+		});
+	}
+
 	async onAfterRendering() {
 		await this._getRespPopover();
 		await this._getList();
@@ -727,6 +751,22 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	handleCancel() {
+		this._itemsBeforeOpen.forEach(item => {
+			item.ref.selected = item.selected;
+		});
+
+		this.togglePopover();
+	}
+
+	handleOK() {
+		if (isPhone()) {
+			this.fireSelectionChange();
+		}
+
+		this.togglePopover();
+	}
+
 	async openPopover() {
 		const popover = await this._getPopover();
 
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 5dd35e035b55..cf63a5db95d8 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -4,8 +4,8 @@
 	class="ui5-multi-combobox-all-items-responsive-popover"
 	hide-arrow
 	_disable-initial-focus
-	@ui5-selection-change={{_listSelectionChange}}
 	@ui5-after-close={{_toggle}}
+	@ui5-before-open={{_beforeOpen}}
 	@ui5-after-open={{_toggle}}
 >
 	{{#if _isPhone}}
@@ -16,7 +16,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{togglePopover}}"
+					@click="{{handleCancel}}"
 				>
 				</ui5-button>
 			</div>
@@ -65,7 +65,7 @@
 		{{/if}}
 	{{/unless}}
 
-	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+	<ui5-list @ui5-selection-change={{_listSelectionChange}} separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 		{{#each _filteredItems}}
 				<ui5-li
 					type="{{../_listItemsType}}"
@@ -83,7 +83,7 @@
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
 				design="Transparent"
-				@click="{{togglePopover}}"
+				@click="{{handleOK}}"
 			>{{_dialogOkButton}}</ui5-button>
 		</div>
 	{{/if}}

From 507115ff32508aa210e99e98fee87b6554e6c1c9 Mon Sep 17 00:00:00 2001
From: Martin Hristov <martin.r.hristov@gmail.com>
Date: Thu, 16 Sep 2021 14:17:59 +0300
Subject: [PATCH 2/2] linting errors

---
 packages/main/src/MultiComboBox.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 9af852d16e99..18c11842f477 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -625,7 +625,6 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_listSelectionChange(event) {
-
 		// sync list items and cb items
 		this.syncItems(event.target.items);
 
@@ -716,7 +715,7 @@ class MultiComboBox extends UI5Element {
 		this._itemsBeforeOpen = this.items.map(item => {
 			return {
 				ref: item,
-				selected: item.selected
+				selected: item.selected,
 			};
 		});
 	}