fix(ui5-multi-combobox): prefilter selected items on n more click (#3931)

FIXES: #3639
FIXES: #3640
FIXES: #3761
FIXES: #3762

Author: MapTo0

packages/main/src/MultiComboBox.hbs

@@ -10,7 +10,7 @@
 		show-more
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
-		@ui5-show-more-items-press="{{_showMorePopover}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
 		@ui5-token-delete="{{_tokenDelete}}"
 		@focusout="{{_tokenizerFocusOut}}"
 		@focusin="{{_tokenizerFocusIn}}"
@@ -65,6 +65,7 @@
 			tabindex="-1"
 			@click="{{togglePopover}}"
 			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
 			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"

packages/main/src/MultiComboBox.js

@@ -410,6 +410,7 @@ class MultiComboBox extends UI5Element {
 		this._filteredItems = [];
 		this.selectedValues = [];
 		this._inputLastValue = "";
+		this._valueBeforeOpen = "";
 		this._deleting = false;
 		this._validationTimeout = null;
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
@@ -432,34 +433,24 @@ class MultiComboBox extends UI5Element {
 		this.fireEvent("change");
 	}
 
-	_showMorePopover() {
-		this.filterSelected = true;
-		this._toggleRespPopover();
+	togglePopover() {
+		this.allItemsPopover.toggle(this);
 	}
 
-	togglePopover() {
-		if (!isPhone()) {
-			this._inputDom.focus();
-		}
+	_showFilteredItems() {
+		this.filterSelected = true;
+		this._showMorePressed = true;
 
-		this._toggleRespPopover();
+		this.togglePopover();
 	}
 
 	filterSelectedItems(event) {
-		if (this.allItemsSelected) {
-			this.filterSelected = true;
-			return;
-		}
-
 		this.filterSelected = event.target.pressed;
+		this.selectedItems = this._filteredItems.filter(item => item.selected);
 	}
 
 	get _showAllItemsButtonPressed() {
-		return this.filterSelected || this.allItemsSelected;
-	}
-
-	get allItemsSelected() {
-		return this.items.length === this.selectedValues.length;
+		return this.filterSelected;
 	}
 
 	get _inputDom() {
@@ -472,6 +463,10 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
+		if (this.filterSelected) {
+			this.filterSelected = false;
+		}
+
 		/* skip calling change event when an input with a placeholder is focused on IE
 			- value of the host and the internal input should be differnt in case of actual input
 			- input is called when a key is pressed => keyup should not be called yet
@@ -576,7 +571,7 @@ class MultiComboBox extends UI5Element {
 
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
-			this._toggleRespPopover();
+			this.togglePopover();
 		}
 
 		if (isDown(event) && this.allItemsPopover.opened && this.items.length) {
@@ -651,13 +646,19 @@ class MultiComboBox extends UI5Element {
 		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
 	}
 
+	_afterOpenPicker() {
+		this._toggle();
+
+		if (!isPhone()) {
+			this._innerInput.focus();
+		} else {
+			this.allItemsPopover.focus();
+		}
+	}
+
 	_toggle() {
 		this.open = !this.open;
 		this.fireEvent("open-change");
-
-		if (!this.open) {
-			this._afterClosePopover();
-		}
 	}
 
 	_getSelectedItems() {
@@ -714,28 +715,41 @@ class MultiComboBox extends UI5Element {
 		this.list = staticAreaItem.querySelector(".ui5-multi-combobox-all-items-list");
 	}
 
-	_toggleRespPopover() {
-		this.allItemsPopover.toggle(this);
-	}
-
 	_click(event) {
-		if (isPhone() && !this.readonly && !this._showMorePressed) {
+		if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
 			this.allItemsPopover.showAt(this);
 		}
 
 		this._showMorePressed = false;
 	}
 
-	_afterClosePopover() {
+	_afterClosePicker() {
 		// close device's keyboard and prevent further typing
 		if (isPhone()) {
 			this.blur();
 		}
 
+		this._toggle();
+
 		this._iconPressed = false;
 		this.filterSelected = false;
 	}
 
+	_beforeOpen() {
+		this._itemsBeforeOpen = this.items.map(item => {
+			return {
+				ref: item,
+				selected: item.selected,
+			};
+		});
+
+		this._valueBeforeOpen = this.value;
+
+		if (this.filterSelected) {
+			this.selectedItems = this._filteredItems.filter(item => item.selected);
+		}
+	}
+
 	onBeforeRendering() {
 		const input = this.shadowRoot.querySelector("input");
 		this._inputLastValue = this.value;
@@ -746,20 +760,6 @@ class MultiComboBox extends UI5Element {
 
 		const filteredItems = this._filterItems(this.value);
 		this._filteredItems = filteredItems;
-
-		if (isPhone() && this.allItemsPopover && this.allItemsPopover.opened) {
-			// Set initial focus to the dialog
-			this.allItemsPopover.focus();
-		}
-	}
-
-	_beforeOpen() {
-		this._itemsBeforeOpen = this.items.map(item => {
-			return {
-				ref: item,
-				selected: item.selected,
-			};
-		});
 	}
 
 	async onAfterRendering() {
@@ -768,6 +768,8 @@ class MultiComboBox extends UI5Element {
 
 		this.toggle(this.shouldDisplayOnlyValueStateMessage);
 		this.storeResponsivePopoverWidth();
+
+		this._deleting = false;
 	}
 
 	get _isPhone() {
@@ -798,6 +800,8 @@ class MultiComboBox extends UI5Element {
 		});
 
 		this.togglePopover();
+
+		this.value = this._valueBeforeOpen;
 	}
 
 	handleOK() {
@@ -816,6 +820,10 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_forwardFocusToInner() {
+		this._innerInput.focus();
+	}
+
 	async closePopover() {
 		const popover = await this._getPopover();
 
@@ -834,12 +842,19 @@ class MultiComboBox extends UI5Element {
 	inputFocusIn() {
 		if (!isPhone()) {
 			this.focused = true;
+		} else {
+			this._innerInput.blur();
 		}
 	}
 
 	inputFocusOut(event) {
 		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
 			this.focused = false;
+
+			// remove the value if user focus out the input and focus is not going in the popover
+			if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== event.relatedTarget)) {
+				this.value = "";
+			}
 		}
 	}
 
@@ -848,7 +863,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _isFocusInside() {
-		return this.focused || this._tokenizerFocused;
+		return !isPhone() && (this.focused || this._tokenizerFocused);
 	}
 
 	get selectedItemsListMode() {

packages/main/src/MultiComboBoxPopover.hbs

@@ -4,9 +4,10 @@
 	class="ui5-multi-combobox-all-items-responsive-popover"
 	hide-arrow
 	_disable-initial-focus
-	@ui5-after-close={{_toggle}}
+	@ui5-selection-change={{_listSelectionChange}}
+	@ui5-after-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
-	@ui5-after-open={{_toggle}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -44,7 +45,6 @@
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						?disabled={{allItemsSelected}}
 						@click="{{filterSelectedItems}}"
 					></ui5-toggle-button>
 				</div>
@@ -65,19 +65,19 @@
 		{{/if}}
 	{{/unless}}
 
-	<ui5-list @ui5-selection-change={{_listSelectionChange}} separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
-		{{#each _filteredItems}}
-				<ui5-li
-					type="{{../_listItemsType}}"
-					additional-text={{this.additionalText}}
-					?selected={{this.selected}}
-					data-ui5-token-id="{{this._id}}"
-					data-ui5-stable="{{this.stableDomRef}}"
-				>
-					{{this.text}}
-				</ui5-li>
-		{{/each}}
-	</ui5-list>
+	{{#if filterSelected}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each selectedItems}}
+				{{> listItem}}
+			{{/each}}
+		</ui5-list>
+	{{else}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each _filteredItems}}
+				{{> listItem}}
+			{{/each}}
+		</ui5-list>
+	{{/if}}
 
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
@@ -115,3 +115,15 @@
 		{{/each}}
 	{{/if}}
 {{/inline}}
+
+{{#*inline "listItem"}}
+	<ui5-li
+		type="{{../_listItemsType}}"
+		additional-text={{this.additionalText}}
+		?selected={{this.selected}}
+		data-ui5-token-id="{{this._id}}"
+		data-ui5-stable="{{this.stableDomRef}}"
+	>
+		{{this.text}}
+	</ui5-li>
+{{/inline}}

packages/main/src/Tokenizer.js

@@ -213,9 +213,10 @@ class Tokenizer extends UI5Element {
 			nextTokenIndex = deletedTokenIndex === this._getVisibleTokens().length - 1 ? deletedTokenIndex - 1 : deletedTokenIndex + 1;
 		}
 		const nextToken = this._getVisibleTokens()[nextTokenIndex]; // if the last item was deleted this will be undefined
-		this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
 
-		if (nextToken) {
+		if (nextToken && !isPhone()) {
+			this._itemNav.setCurrentItem(nextToken); // update the item navigation with the new token or undefined, if the last was deleted
+
 			setTimeout(() => {
 				nextToken.focus();
 			}, 0);

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

@@ -222,6 +222,70 @@ describe("MultiComboBox general interaction", () => {
 
 			assert.ok(await nMoreText.getText(), "1 More", "token 1 should be visible");
 		});
+
+		it("tests if clicking n more will prefilter items before opening the popover", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+			await browser.setWindowSize(1920, 1080);
+
+			const mcb = await $("#more-mcb");
+			const icon = await mcb.shadow$("[input-icon]");
+			const nMoreText = await mcb.shadow$("ui5-tokenizer").shadow$(".ui5-tokenizer-more-text");
+
+			await mcb.scrollIntoView();
+			await nMoreText.click();
+
+			await browser.waitUntil(async () => mcb.getProperty("open"), {
+				timeout: 500,
+				timeoutMsg: "Popover is open"
+			});
+
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#more-mcb")
+			const popover = await $(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+			const list = await popover.$(".ui5-multi-combobox-all-items-list");
+
+			assert.strictEqual((await list.getProperty("items")).length, 3, "3 items should be shown (all selected)");
+
+			await icon.click();
+
+			await browser.waitUntil(async () => !(await mcb.getProperty("open")), {
+				timeout: 500,
+				timeoutMsg: "Popover should be closed"
+			});
+
+			await icon.click();
+
+			await browser.waitUntil(async () => await mcb.getProperty("open"), {
+				timeout: 500,
+				timeoutMsg: "Popover should be open"
+			});
+
+			assert.strictEqual((await list.getProperty("items")).length, 4, "4 items should be shown");
+		});
+
+		it("tests filtering of items when nmore popover is open and user types in the input fueld", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+			await browser.setWindowSize(1920, 1080);
+
+			const mcb = await $("#more-mcb");
+			const nMoreText = await mcb.shadow$("ui5-tokenizer").shadow$(".ui5-tokenizer-more-text");
+
+			await mcb.scrollIntoView();
+
+			const input = await mcb.shadow$("input");
+
+			await nMoreText.click();
+
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#more-mcb")
+			const popover = await $(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+			const list = await popover.$(".ui5-multi-combobox-all-items-list");
+			const lastListItem = await list.$("ui5-li:last-child");
+
+			await input.click();
+			await input.keys("c");
+
+			assert.strictEqual((await list.getProperty("items")).length, 3, "3 items should be shown (all selected)");
+			assert.notOk(await lastListItem.getProperty("selected"), "last item should not be selected");
+		})
 	});
 
 	describe("keyboard handling", () => {