fix(ui5-multi-combobox): pasting content should not be prevented (#8413)

FIXES: #8275

Author: MapTo0

packages/main/src/MultiComboBox.ts

@@ -724,7 +724,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isInsertShift(e)) {
-			this._handleInsertPaste();
+			this._handleInsertPaste(e);
 			return;
 		}
 
@@ -756,9 +756,22 @@ class MultiComboBox extends UI5Element {
 		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(e) || isDelete(e) || isEscape(e) || isEnter(e));
 	}
 
-	_handlePaste(e:ClipboardEvent) {
-		e.preventDefault();
+	_selectItems(matchingItems: IMultiComboBoxItem[]) {
+		this._previouslySelectedItems = this._getSelectedItems();
 
+		matchingItems.forEach(item => {
+			item.selected = true;
+			this.value = "";
+
+			const changePrevented = this.fireSelectionChange();
+
+			if (changePrevented) {
+				this._revertSelection();
+			}
+		});
+	}
+
+	_handlePaste(e: ClipboardEvent) {
 		if (this.readonly || !e.clipboardData) {
 			return;
 		}
@@ -769,10 +782,20 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
-		this._createTokenFromText(pastedText);
+		this._handleTokenCreationUponPaste(pastedText, e);
+	}
+
+	_handleTokenCreationUponPaste(pastedText: string, e: KeyboardEvent | ClipboardEvent) {
+		const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
+		const matchingItems = this.items.filter(item => separatedText.includes(item.text) && !item.selected);
+
+		if (matchingItems.length > 1) {
+			e.preventDefault();
+			this._selectItems(matchingItems);
+		}
 	}
 
-	async _handleInsertPaste() {
+	async _handleInsertPaste(e: KeyboardEvent) {
 		if (this.readonly || isFirefox()) {
 			return;
 		}
@@ -783,29 +806,7 @@ class MultiComboBox extends UI5Element {
 			return;
 		}
 
-		this._createTokenFromText(pastedText);
-	}
-
-	_createTokenFromText(pastedText: string) {
-		const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
-		const matchingItems = this.items.filter(item => separatedText.indexOf(item.text) > -1 && !item.selected);
-
-		if (separatedText.length > 1) {
-			this._previouslySelectedItems = this._getSelectedItems();
-			matchingItems.forEach(item => {
-				item.selected = true;
-				this.value = "";
-
-				const changePrevented = this.fireSelectionChange();
-
-				if (changePrevented) {
-					this._revertSelection();
-				}
-			});
-		} else {
-			this.value = pastedText;
-			this.fireEvent("input");
-		}
+		this._handleTokenCreationUponPaste(pastedText, e);
 	}
 
 	_handleShow(e: KeyboardEvent) {
@@ -1260,7 +1261,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isInsertShift(e)) {
-			this._handleInsertPaste();
+			this._handleInsertPaste(e);
 		}
 
 		if (isHome(e)) {

packages/main/test/specs/MultiComboBox.spec.js

@@ -1354,10 +1354,15 @@ describe("MultiComboBox general interaction", () => {
 			await input.click();
 			await input.keys(["Control", "v"]);
 
-			assert.equal(await mcb2.getProperty("value"), "Condensed", "Token is pasted into the second control");
+			assert.strictEqual(await mcb2.getProperty("value"), "Condensed", "Token is pasted into the second control");
+			assert.ok(await mcb2.getProperty("open"), "Condensed", "Popover should be open");
+
+			await input.keys(["Control", "v"]);
+
+			assert.equal(await mcb2.getProperty("value"), "CondensedCondensed", "Pasting second time should append the as text");
 		});
 
-		it ("should not be able to paste tokenwith CTRL+V in read only multi combo box", async () => {
+		it ("should not be able to paste token with CTRL+V in read only multi combo box", async () => {
 			await browser.url(`test/pages/MultiComboBox.html`);
 
 			const mcb = await browser.$("#multi1");