feat(ui5-multi-combobox): resolve merge conflicts

SAP · May 26, 2022 · e8c1229 · e8c1229
1 parent cc64cd9
commit e8c1229
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 4 deletions.
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -473,7 +473,8 @@ class MultiComboBox extends UI5Element {
 
 	filterSelectedItems(event) {
 		this.filterSelected = event.target.pressed;
-		this.selectedItems = this._filteredItems.filter(item => item.selected);
+		const selectedItems = this._filteredItems.filter(item => item.selected);
+		this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
 	}
 
 	get _showAllItemsButtonPressed() {
@@ -1058,7 +1059,7 @@ class MultiComboBox extends UI5Element {
 
 	_filterItems(str) {
 		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter);
+		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
 
 		// Return the filtered items and their group items
 		return this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
@@ -1186,7 +1187,8 @@ class MultiComboBox extends UI5Element {
 		this._valueBeforeOpen = this.value;
 
 		if (this.filterSelected) {
-			this.selectedItems = this._filteredItems.filter(item => item.selected);
+			const selectedItems = this._filteredItems.filter(item => item.selected);
+			this.selectedItems = this.items.filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, selectedItems) || selectedItems.indexOf(item) !== -1);
 		}
 	}
 

diff --git a/packages/main/src/MultiComboBoxGroupItem.js b/packages/main/src/MultiComboBoxGroupItem.js
@@ -36,7 +36,7 @@ const metadata = {
  * @tagname ui5-mcb-group-item
  * @public
  * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
- * @since 1.0.0-rc.15
+ * @since 1.4.0
  */
 class MultiComboBoxGroupItem extends UI5Element {
 	static get metadata() {

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1343,6 +1343,174 @@ describe("MultiComboBox general interaction", () => {
 			await input.keys("ArrowDown");
 
 
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+			await groupItem.keys("Enter");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated");
+
+			await groupItem.keys("Space");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated)");
+
+			await groupItem.keys("ArrowUp");
+
+			assert.equal(await groupItem.getProperty("focused"), false, "The first group header should be focused");
+			assert.equal(await mcb.getProperty("focused"), true, "The first group header should be focused");
+		});
+	});
+
+	describe("Grouping", () => {
+		it ("Tests group filtering", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			let listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			await arrow.click();
+
+			assert.strictEqual(groupItems.length, 3, "Group items should be 3");
+			assert.strictEqual(listItems.length, 12, "Items should be 12");
+
+			await input.keys("B");
+
+			popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			assert.strictEqual(groupItems.length, 1, "Filtered group items should be 1");
+			assert.strictEqual(listItems.length, 1, "Filtered items should be 1");
+
+			await input.keys("Backspace");
+			await input.keys(['E', 'u', 'r', 'o', 'p', 'e']);
+
+			assert.equal(await popover.getProperty("opened"), false, "Popover should not be open");
+		});
+
+		it ("Tests group item focusability", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+		});
+
+		it ("Group header keyboard handling", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+			await groupItem.keys("Enter");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated");
+
+			await groupItem.keys("Space");
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+			assert.equal(await popover.getProperty("opened"), true, "Popover should not be open");
+			assert.strictEqual(await input.getValue(), "", "The value is not updated)");
+
+			await groupItem.keys("ArrowUp");
+
+			assert.equal(await groupItem.getProperty("focused"), false, "The first group header should be focused");
+			assert.equal(await mcb.getProperty("focused"), true, "The first group header should be focused");
+		});
+	});
+
+	describe("Grouping", () => {
+		it ("Tests group filtering", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			let listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			await arrow.click();
+
+			assert.strictEqual(groupItems.length, 3, "Group items should be 3");
+			assert.strictEqual(listItems.length, 12, "Items should be 12");
+
+			await input.keys("B");
+
+			popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
+			listItems = await popover.$("ui5-list").$$("ui5-li");
+
+			assert.strictEqual(groupItems.length, 1, "Filtered group items should be 1");
+			assert.strictEqual(listItems.length, 1, "Filtered items should be 1");
+
+			await input.keys("Backspace");
+			await input.keys(['E', 'u', 'r', 'o', 'p', 'e']);
+
+			assert.equal(await popover.getProperty("opened"), false, "Popover should not be open");
+		});
+
+		it ("Tests group item focusability", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
+
+			assert.equal(await groupItem.getProperty("focused"), true, "The first group header should be focused");
+		});
+
+		it ("Group header keyboard handling", async () => {
+			await browser.url(`http://localhost:${PORT}/test-resources/pages/MultiComboBox.html`);
+
+			const mcb = await browser.$("#mcb-grouping");
+			const input = await mcb.shadow$("#ui5-multi-combobox-input");
+			const arrow = await mcb.shadow$("[input-icon]");
+			const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
+			const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+			let groupItem;
+
+			await arrow.click();
+			await input.keys("ArrowDown");
+
+
 			groupItem = await popover.$("ui5-list").$$("ui5-li-groupheader")[0];
 			await groupItem.keys("Enter");