From ce9764c8c0f3b9c05647f33f8f87e50a1c41105f Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Thu, 20 Nov 2025 10:55:44 +0200
Subject: [PATCH 1/5] feat(ui5-multiinput): implement selected token indicator
 in filter dialog

---
 .../cypress/specs/MultiInput.mobile.cy.tsx    | 170 +++++++++++++++++-
 packages/main/src/InputPopoverTemplate.tsx    |   5 +-
 packages/main/src/InputTemplate.tsx           |   5 +-
 packages/main/src/MultiInput.ts               |  52 ++++++
 packages/main/src/MultiInputTemplate.tsx      |  76 +++++++-
 .../src/features/InputSuggestionsTemplate.tsx |  41 +++--
 packages/main/src/themes/Suggestions.css      |   4 +
 7 files changed, 327 insertions(+), 26 deletions(-)

diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
index 62a4f5c35f33..08a6d03e1dc3 100644
--- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
+++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
@@ -1,7 +1,27 @@
 import MultiInput from "../../src/MultiInput.js";
-import ResponsivePopover from "../../src/ResponsivePopover.js";
+import Token from "../../src/Token.js";
+import SuggestionItem from "../../src/SuggestionItem.js";
+import Button from "../../src/Button.js";
 import "../../src/features/InputSuggestions.js";
 
+const createTokenFromText = (text: string): HTMLElement => {
+	const token = document.createElement("ui5-token");
+	token.setAttribute("text", text);
+	token.setAttribute("slot", "tokens");
+	return token;
+};
+
+const addTokenToMI = (token: HTMLElement, id: string) => {
+	document.getElementById(id)?.appendChild(token);
+};
+
+const handleTokenDelete = (event) => {
+	const mi = event.target;
+	event.detail.tokens.forEach(token => {
+		mi.removeChild(token);
+	});
+};
+
 describe("Multi Input on mobile device", () => {
 	beforeEach(() => {
 		cy.ui5SimulateDevice("phone");
@@ -22,7 +42,7 @@ describe("Multi Input on mobile device", () => {
 
 		cy.get("@multiInput")
 			.shadow()
-			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.find("[ui5-responsive-popover]")
 			.as("popover")
 			.ui5ResponsivePopoverOpened();
 
@@ -44,4 +64,150 @@ describe("Multi Input on mobile device", () => {
 			.should("have.value", "test");
 		cy.get("@onChange").should("not.have.been.called");
 	});
+
+	describe("Filter-Selected Button", () => {
+		it("Filter-selected button state changes when tokens are added/removed", () => {
+			cy.mount(
+				<>
+					<MultiInput id="test-multi-input" showSuggestions>
+						<SuggestionItem text="Argentina"></SuggestionItem>
+						<SuggestionItem text="Brazil"></SuggestionItem>
+						<SuggestionItem text="Canada"></SuggestionItem>
+					</MultiInput>
+					<Button id="add-token">Add Token</Button>
+				</>
+			);
+
+			// Setup token add functionality
+			cy.get("#add-token").then(button => {
+				button[0].addEventListener("click", () => {
+					addTokenToMI(createTokenFromText("Test Token"), "test-multi-input");
+				});
+			});
+
+			cy.get("#test-multi-input").then(multiInput => {
+				multiInput[0].addEventListener("ui5-token-delete", handleTokenDelete);
+			});
+
+			// Open suggestions popover
+			cy.get("#test-multi-input")
+				.realClick();
+
+			cy.get("#test-multi-input")
+				.shadow()
+				.find("[ui5-responsive-popover]")
+				.as("popover")
+				.ui5ResponsivePopoverOpened();
+
+			// Assert: Button should be initially disabled (no tokens)
+			cy.get("@popover")
+				.find("[ui5-toggle-button]")
+				.as("filterButton")
+				.should("have.attr", "disabled");
+
+			// Close popover to add token
+			cy.get("@popover")
+				.shadow()
+				.find(".ui5-responsive-popover-close-btn")
+				.realClick();
+
+			// Act: Add a token
+			cy.get("#add-token").realClick();
+
+			// Wait for token to be added and re-open popover
+			cy.get("#test-multi-input")
+				.find("[ui5-token]")
+				.should("have.length", 1);
+
+			cy.get("#test-multi-input")
+				.realClick();
+
+			cy.get("@popover")
+				.ui5ResponsivePopoverOpened();
+
+			// Assert: Button should be enabled after adding a token
+			cy.get("@filterButton")
+				.should("not.have.attr", "disabled")
+				.should("have.attr", "pressed");
+
+			// Act: Remove the token using the delete icon in the token list
+			cy.get("@popover")
+				.find("[ui5-li-standard].ui5-suggestion-token-item")
+				.first()
+				.shadow()
+				.find("[ui5-button]")
+				.realClick();
+
+			// Wait for token to be removed
+			cy.get("#test-multi-input")
+				.find("[ui5-token]")
+				.should("have.length", 0);
+
+			// Assert: Button should be disabled after removing all tokens
+			cy.get("@filterButton")
+				.should("have.attr", "disabled");
+		});
+
+		it("Filter-selected button affects list content display", () => {
+			cy.mount(
+				<MultiInput id="test-multi-input" showSuggestions>
+					<Token slot="tokens" text="Token 1"></Token>
+					<Token slot="tokens" text="Token 2"></Token>
+					<SuggestionItem text="Argentina"></SuggestionItem>
+					<SuggestionItem text="Brazil"></SuggestionItem>
+				</MultiInput>
+			);
+
+			// Open suggestions popover
+			cy.get("#test-multi-input")
+				.realClick();
+
+			cy.get("#test-multi-input")
+				.shadow()
+				.find("[ui5-responsive-popover]")
+				.as("popover")
+				.ui5ResponsivePopoverOpened();
+
+			cy.get("@popover")
+				.find("[ui5-toggle-button]")
+				.as("filterButton");
+
+			// Assert: Initially showing tokens (button pressed)
+			cy.get("@filterButton")
+				.should("have.attr", "pressed");
+
+			// Assert: Should see token list items
+			cy.get("@popover")
+				.find("[ui5-list].ui5-tokenizer-list")
+				.should("exist");
+
+			cy.get("@popover")
+				.find("[ui5-li-standard].ui5-suggestion-token-item")
+				.should("have.length", 2);
+
+			// Act: Toggle to hide tokens
+			cy.get("@filterButton").realClick();
+
+			// Assert: Should see suggestion items instead
+			cy.get("@popover")
+				.find("[ui5-list]:not(.ui5-tokenizer-list)")
+				.should("exist");
+
+			cy.get("@popover")
+				.find("[ui5-suggestion-item]")
+				.should("have.length", 2);
+
+			// Act: Toggle back to show tokens
+			cy.get("@filterButton").realClick();
+
+			// Assert: Should see token list items again
+			cy.get("@popover")
+				.find("[ui5-list].ui5-tokenizer-list")
+				.should("exist");
+
+			cy.get("@popover")
+				.find("[ui5-li-standard].ui5-suggestion-token-item")
+				.should("have.length", 2);
+		});
+	});
 });
diff --git a/packages/main/src/InputPopoverTemplate.tsx b/packages/main/src/InputPopoverTemplate.tsx
index 1b0fc9534dda..aec849aaa10a 100644
--- a/packages/main/src/InputPopoverTemplate.tsx
+++ b/packages/main/src/InputPopoverTemplate.tsx
@@ -10,12 +10,13 @@ import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult }) {
 	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
 
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, mobileHeader, valueStateMessage, valueStateMessageInputIcon }) }
 
 			{this.hasValueStateMessage &&
 				<Popover
diff --git a/packages/main/src/InputTemplate.tsx b/packages/main/src/InputTemplate.tsx
index a5e3c75f98b2..3eae53793cee 100644
--- a/packages/main/src/InputTemplate.tsx
+++ b/packages/main/src/InputTemplate.tsx
@@ -6,8 +6,9 @@ import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
 type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook, mobileHeader?: TemplateHook }) {
 	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -118,7 +119,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+			{ InputPopoverTemplate.call(this, { suggestionsList, mobileHeader }) }
 		</>
 	);
 }
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index ee18c7abf636..5d9d2782f445 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -123,6 +123,22 @@ class MultiInput extends Input implements IFormInputElement {
 	@property()
 	declare name?: string;
 
+	/**
+	 * Indicates whether to show tokens in suggestions popover
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_showTokensInSuggestions = false;
+
+	/**
+	 * Tracks whether user has explicitly toggled the show tokens state
+	 * @default false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_userToggledShowTokens = false;
+
 	/**
 	 * Defines the component tokens.
 	 * @public
@@ -343,6 +359,23 @@ class MultiInput extends Input implements IFormInputElement {
 		if (this.tokenizer) {
 			this.tokenizer.readonly = this.readonly;
 		}
+
+		// Reset toggle state if there are tokens and dialog is about to open
+		if (this.tokens.length > 0 && !this._userToggledShowTokens) {
+			this._showTokensInSuggestions = true;
+		}
+	}
+
+	/**
+	 * Override the _handlePickerAfterOpen method to reset toggle state when dialog opens with tokens
+	 */
+	_handlePickerAfterOpen() {
+		if (this.tokens.length > 0) {
+			this._showTokensInSuggestions = true;
+			this._userToggledShowTokens = false;
+		}
+
+		super._handlePickerAfterOpen();
 	}
 
 	onAfterRendering() {
@@ -419,6 +452,25 @@ class MultiInput extends Input implements IFormInputElement {
 	get shouldDisplayOnlyValueStateMessage() {
 		return this.hasValueStateMessage && !this.readonly && !this.open && this.focused && !this.tokenizer.open;
 	}
+
+	/**
+	 * Computes the effective state for showing tokens in suggestions.
+	 * Defaults to true when tokens exist, but respects explicit user toggle.
+	 */
+	get _effectiveShowTokensInSuggestions() {
+		// If no tokens exist, always false
+		if (this.tokens.length === 0) {
+			return false;
+		}
+
+		// If user has never interacted with the toggle, default to true when tokens exist
+		if (!this._userToggledShowTokens) {
+			return true;
+		}
+
+		// If user has interacted, respect their choice
+		return this._showTokensInSuggestions;
+	}
 }
 
 MultiInput.define();
diff --git a/packages/main/src/MultiInputTemplate.tsx b/packages/main/src/MultiInputTemplate.tsx
index 25bbe7cb0e00..16c0559d7cce 100644
--- a/packages/main/src/MultiInputTemplate.tsx
+++ b/packages/main/src/MultiInputTemplate.tsx
@@ -2,11 +2,20 @@ import Icon from "./Icon.js";
 import InputTemplate from "./InputTemplate.js";
 import type MultiInput from "./MultiInput.js";
 import Tokenizer from "./Tokenizer.js";
+import ToggleButton from "./ToggleButton.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
 
 export default function MultiInputTemplate(this: MultiInput) {
 	return [
-		InputTemplate.call(this, { preContent, postContent }),
+		InputTemplate.call(this, {
+			preContent,
+			postContent,
+			suggestionsList: multiInputSuggestionsList,
+			mobileHeader: multiInputMobileHeader,
+		}),
 	];
 }
 
@@ -51,3 +60,68 @@ function postContent(this: MultiInput) {
 		</>
 	);
 }
+
+function multiInputSuggestionsList(this: MultiInput) {
+	if (this._effectiveShowTokensInSuggestions) {
+		return (
+			<List
+				class="ui5-tokenizer-list"
+				accessibleRole={ListAccessibleRole.ListBox}
+				separators={this.suggestionSeparators}
+				selectionMode="Delete"
+				onMouseDown={this.onItemMouseDown}
+				onItemClick={this._handleSuggestionItemPress}
+				onSelectionChange={this._handleSelectionChange}
+				onItemDelete={(e: any) => {
+					const listItem = e.detail.item;
+					const tokenId = listItem.getAttribute("data-ui5-token-ref-id");
+					const token = this.tokens.find((t: any) => t._id === tokenId);
+
+					if (token) {
+						this.tokenDelete({ detail: { tokens: [token] } } as any);
+					}
+				}}
+			>
+				{this.tokens?.map((token: any, index: number) => (
+					<ListItemStandard
+						key={index}
+						class="ui5-suggestion-token-item"
+						data-ui5-token-ref-id={token._id}
+						wrappingType="Normal"
+						text={token.text}
+					/>
+				))}
+			</List>
+		);
+	}
+
+	return (
+		<List
+			accessibleRole={ListAccessibleRole.ListBox}
+			separators={this.suggestionSeparators}
+			selectionMode="Single"
+			onMouseDown={this.onItemMouseDown}
+			onItemClick={this._handleSuggestionItemPress}
+			onSelectionChange={this._handleSelectionChange}
+		>
+			<slot></slot>
+		</List>
+	);
+}
+
+function multiInputMobileHeader(this: MultiInput) {
+	return (
+		<ToggleButton
+			class="ui5-multi-input-mobile-dialog-button"
+			design="Transparent"
+			icon="multiselect-all"
+			accessibleName="Show selected tokens"
+			disabled={!this.tokens?.length}
+			pressed={this._effectiveShowTokensInSuggestions}
+			onClick={() => {
+				this._userToggledShowTokens = true;
+				this._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;
+			}}
+		/>
+	);
+}
diff --git a/packages/main/src/features/InputSuggestionsTemplate.tsx b/packages/main/src/features/InputSuggestionsTemplate.tsx
index bd3d917370fa..2b689bcd6771 100644
--- a/packages/main/src/features/InputSuggestionsTemplate.tsx
+++ b/packages/main/src/features/InputSuggestionsTemplate.tsx
@@ -7,8 +7,10 @@ import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 import ListAccessibleRole from "../types/ListAccessibleRole.js";
 
-export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
 	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	// Mobile header hook - intended only for MultiInput design scenario
+	const mobileHeader = hooks?.mobileHeader;
 	const valueStateMessage = hooks?.valueStateMessage;
 	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
 
@@ -45,34 +47,35 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 									placeholder={this.placeholder}
 									onInput={this._handleInput}
 								/>
+								{mobileHeader?.call(this)}
 							</div>
 						</div>
-					</div>
 
-					{this.hasValueStateMessage &&
-					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
+						{this.hasValueStateMessage &&
+							<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
+								<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+								{this.open && valueStateMessage?.call(this)}
+							</div>
+						}
 					</div>
-					}
 				</>
 			}
 
 			{!this._isPhone && this.hasValueStateMessage &&
-					<div
-						slot="header"
-						class={{
-							"ui5-responsive-popover-header": true,
-							...this.classes.popoverValueState,
-						}}
-						style={this.styles.suggestionPopoverHeader}
-					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
-						{ this.open && valueStateMessage?.call(this) }
-					</div>
+				<div
+					slot="header"
+					class={{
+						"ui5-responsive-popover-header": true,
+						...this.classes.popoverValueState,
+					}}
+					style={this.styles.suggestionPopoverHeader}
+				>
+					<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+					{this.open && valueStateMessage?.call(this)}
+				</div>
 			}
 
-			{ suggestionsList.call(this) }
+			{suggestionsList.call(this)}
 
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
index 8fda66053477..655e16750cf0 100644
--- a/packages/main/src/themes/Suggestions.css
+++ b/packages/main/src/themes/Suggestions.css
@@ -21,4 +21,8 @@
 
 .native-input-wrapper .ui5-input-inner-phone {
 	margin: 0;
+}
+
+.native-input-wrapper .ui5-multi-input-mobile-dialog-button {
+	margin-inline-start: 0.5rem;
 }
\ No newline at end of file

From 0190f8ed72a2144dd1676a29dd3d3f36a782e97e Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Mon, 24 Nov 2025 19:14:26 +0200
Subject: [PATCH 2/5] fix(ui5-multiinput): correct ts errors

---
 packages/main/src/InputPopoverTemplate.tsx | 13 +++++++++----
 packages/main/src/MultiInputTemplate.tsx   |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/InputPopoverTemplate.tsx b/packages/main/src/InputPopoverTemplate.tsx
index aec849aaa10a..dc1a797e240c 100644
--- a/packages/main/src/InputPopoverTemplate.tsx
+++ b/packages/main/src/InputPopoverTemplate.tsx
@@ -16,9 +16,14 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, mobileHeader, valueStateMessage, valueStateMessageInputIcon }) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, {
+				suggestionsList,
+				mobileHeader,
+				valueStateMessage,
+				valueStateMessageInputIcon
+			})}
 
-			{this.hasValueStateMessage &&
+			{this.hasValueStateMessage && (
 				<Popover
 					preventInitialFocus={true}
 					preventFocusRestore={true}
@@ -33,10 +38,10 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 				>
 					<div slot="header" class={this.classes.popoverValueState}>
 						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.valueStateOpen && valueStateMessage.call(this) }
+						{this.valueStateOpen && valueStateMessage.call(this)}
 					</div>
 				</Popover>
-			}
+			)}
 		</>
 	);
 }
diff --git a/packages/main/src/MultiInputTemplate.tsx b/packages/main/src/MultiInputTemplate.tsx
index 16c0559d7cce..e7b7bb021c53 100644
--- a/packages/main/src/MultiInputTemplate.tsx
+++ b/packages/main/src/MultiInputTemplate.tsx
@@ -1,6 +1,7 @@
 import Icon from "./Icon.js";
 import InputTemplate from "./InputTemplate.js";
 import type MultiInput from "./MultiInput.js";
+import type { MultiInputTokenDeleteEventDetail } from "./MultiInput.js";
 import Tokenizer from "./Tokenizer.js";
 import ToggleButton from "./ToggleButton.js";
 import List from "./List.js";
@@ -78,7 +79,7 @@ function multiInputSuggestionsList(this: MultiInput) {
 					const token = this.tokens.find((t: any) => t._id === tokenId);
 
 					if (token) {
-						this.tokenDelete({ detail: { tokens: [token] } } as any);
+						this.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);
 					}
 				}}
 			>

From 76b9389df467715b0827913408c62c594139d6bd Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Mon, 24 Nov 2025 19:56:21 +0200
Subject: [PATCH 3/5] fix(ui5-multiinput): correct tests

---
 .../cypress/specs/MultiInput.mobile.cy.tsx    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
index 08a6d03e1dc3..375fe099fa7b 100644
--- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
+++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx
@@ -3,6 +3,7 @@ import Token from "../../src/Token.js";
 import SuggestionItem from "../../src/SuggestionItem.js";
 import Button from "../../src/Button.js";
 import "../../src/features/InputSuggestions.js";
+import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 
 const createTokenFromText = (text: string): HTMLElement => {
 	const token = document.createElement("ui5-token");
@@ -38,11 +39,13 @@ describe("Multi Input on mobile device", () => {
 			.as("multiInput");
 
 		cy.get("@multiInput")
+			.shadow()
+			.find(".ui5-input-inner")
 			.realClick();
 
 		cy.get("@multiInput")
 			.shadow()
-			.find("[ui5-responsive-popover]")
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
 			.as("popover")
 			.ui5ResponsivePopoverOpened();
 
@@ -78,7 +81,6 @@ describe("Multi Input on mobile device", () => {
 				</>
 			);
 
-			// Setup token add functionality
 			cy.get("#add-token").then(button => {
 				button[0].addEventListener("click", () => {
 					addTokenToMI(createTokenFromText("Test Token"), "test-multi-input");
@@ -89,13 +91,14 @@ describe("Multi Input on mobile device", () => {
 				multiInput[0].addEventListener("ui5-token-delete", handleTokenDelete);
 			});
 
-			// Open suggestions popover
 			cy.get("#test-multi-input")
+				.shadow()
+				.find(".ui5-input-inner")
 				.realClick();
 
 			cy.get("#test-multi-input")
 				.shadow()
-				.find("[ui5-responsive-popover]")
+				.find<ResponsivePopover>("[ui5-responsive-popover]")
 				.as("popover")
 				.ui5ResponsivePopoverOpened();
 
@@ -105,40 +108,38 @@ describe("Multi Input on mobile device", () => {
 				.as("filterButton")
 				.should("have.attr", "disabled");
 
-			// Close popover to add token
-			cy.get("@popover")
+			cy.get("#test-multi-input")
 				.shadow()
 				.find(".ui5-responsive-popover-close-btn")
 				.realClick();
 
-			// Act: Add a token
 			cy.get("#add-token").realClick();
 
-			// Wait for token to be added and re-open popover
 			cy.get("#test-multi-input")
 				.find("[ui5-token]")
 				.should("have.length", 1);
 
 			cy.get("#test-multi-input")
+				.shadow()
+				.find(".ui5-input-inner")
 				.realClick();
 
-			cy.get("@popover")
+		cy.get<ResponsivePopover>("@popover")
 				.ui5ResponsivePopoverOpened();
 
 			// Assert: Button should be enabled after adding a token
 			cy.get("@filterButton")
 				.should("not.have.attr", "disabled")
+			cy.get("@filterButton")
 				.should("have.attr", "pressed");
 
-			// Act: Remove the token using the delete icon in the token list
 			cy.get("@popover")
-				.find("[ui5-li-standard].ui5-suggestion-token-item")
+				.find("[ui5-li].ui5-suggestion-token-item")
 				.first()
 				.shadow()
 				.find("[ui5-button]")
 				.realClick();
 
-			// Wait for token to be removed
 			cy.get("#test-multi-input")
 				.find("[ui5-token]")
 				.should("have.length", 0);
@@ -153,20 +154,21 @@ describe("Multi Input on mobile device", () => {
 				<MultiInput id="test-multi-input" showSuggestions>
 					<Token slot="tokens" text="Token 1"></Token>
 					<Token slot="tokens" text="Token 2"></Token>
+					<Token slot="tokens" text="Token 3"></Token>
 					<SuggestionItem text="Argentina"></SuggestionItem>
 					<SuggestionItem text="Brazil"></SuggestionItem>
 				</MultiInput>
 			);
 
-			// Open suggestions popover
 			cy.get("#test-multi-input")
-				.realClick();
+				.shadow()
+				.find(".ui5-input-inner")
+				.click();
 
 			cy.get("#test-multi-input")
 				.shadow()
 				.find("[ui5-responsive-popover]")
 				.as("popover")
-				.ui5ResponsivePopoverOpened();
 
 			cy.get("@popover")
 				.find("[ui5-toggle-button]")
@@ -182,8 +184,8 @@ describe("Multi Input on mobile device", () => {
 				.should("exist");
 
 			cy.get("@popover")
-				.find("[ui5-li-standard].ui5-suggestion-token-item")
-				.should("have.length", 2);
+				.find("[ui5-li].ui5-suggestion-token-item")
+				.should("have.length", 3);
 
 			// Act: Toggle to hide tokens
 			cy.get("@filterButton").realClick();
@@ -193,7 +195,7 @@ describe("Multi Input on mobile device", () => {
 				.find("[ui5-list]:not(.ui5-tokenizer-list)")
 				.should("exist");
 
-			cy.get("@popover")
+			cy.get("#test-multi-input")
 				.find("[ui5-suggestion-item]")
 				.should("have.length", 2);
 
@@ -206,8 +208,8 @@ describe("Multi Input on mobile device", () => {
 				.should("exist");
 
 			cy.get("@popover")
-				.find("[ui5-li-standard].ui5-suggestion-token-item")
-				.should("have.length", 2);
+				.find("[ui5-li].ui5-suggestion-token-item")
+				.should("have.length", 3);
 		});
 	});
 });

From 41db8f82f0e4d46338f4f1fd3271bc26f22f0cf6 Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Tue, 25 Nov 2025 14:26:22 +0200
Subject: [PATCH 4/5] fix(ui5-multiinput): translate accessibleName

---
 packages/main/src/MultiInput.ts                 | 6 +++++-
 packages/main/src/MultiInputTemplate.tsx        | 2 +-
 packages/main/src/i18n/messagebundle.properties | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index 5d9d2782f445..73f447c748e3 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -19,7 +19,7 @@ import {
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP } from "./generated/i18n/i18n-defaults.js";
+import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP, MULTIINPUT_FILTER_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./MultiInputTemplate.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -404,6 +404,10 @@ class MultiInput extends Input implements IFormInputElement {
 		return MultiInput.i18nBundle.getText(MULTIINPUT_VALUE_HELP);
 	}
 
+	get _filterButtonAccessibleName() {
+		return MultiInput.i18nBundle.getText(MULTIINPUT_FILTER_BUTTON_LABEL);
+	}
+
 	get _tokensCountTextId() {
 		return `hiddenText-nMore`;
 	}
diff --git a/packages/main/src/MultiInputTemplate.tsx b/packages/main/src/MultiInputTemplate.tsx
index e7b7bb021c53..03c214d7eb6d 100644
--- a/packages/main/src/MultiInputTemplate.tsx
+++ b/packages/main/src/MultiInputTemplate.tsx
@@ -116,7 +116,7 @@ function multiInputMobileHeader(this: MultiInput) {
 			class="ui5-multi-input-mobile-dialog-button"
 			design="Transparent"
 			icon="multiselect-all"
-			accessibleName="Show selected tokens"
+			accessibleName={this._filterButtonAccessibleName}
 			disabled={!this.tokens?.length}
 			pressed={this._effectiveShowTokensInSuggestions}
 			onClick={() => {
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index a604970dcb00..2ac9844cab6e 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -420,6 +420,9 @@ MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
 #XACT: ARIA announcement for value help
 MULTIINPUT_VALUE_HELP=Value help available
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_FILTER_BUTTON_LABEL=Show selected tokens
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 

From d29fa9ad3288a7bbbad83b3cc4281e5410825f53 Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Tue, 25 Nov 2025 14:57:05 +0200
Subject: [PATCH 5/5] fix(ui5-multiinput): correct lint

---
 packages/main/src/MultiInput.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index 73f447c748e3..1703900e3720 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -19,7 +19,12 @@ import {
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
-import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP, MULTIINPUT_FILTER_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
+import {
+	MULTIINPUT_ROLEDESCRIPTION_TEXT,
+	MULTIINPUT_VALUE_HELP_LABEL,
+	MULTIINPUT_VALUE_HELP,
+	MULTIINPUT_FILTER_BUTTON_LABEL,
+} from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./MultiInputTemplate.js";
 import styles from "./generated/themes/MultiInput.css.js";