fix(ui5-multi-input): show suggestions instead of tokens on desktop

Author: aleksandar-terziev

packages/main/cypress/specs/MultiInput.cy.tsx

@@ -371,6 +371,43 @@ describe("MultiInput tokens", () => {
 		cy.get("@changeSpy").should("have.been.calledOnce");
 	});
 
+	it("should show suggestions (not tokens) when typing for a second token", () => {
+		cy.mount(
+			<MultiInput showSuggestions>
+				<Token slot="tokens" text="Argentina"></Token>
+				<SuggestionItem text="Bulgaria"></SuggestionItem>
+				<SuggestionItem text="Brazil"></SuggestionItem>
+				<SuggestionItem text="Belgium"></SuggestionItem>
+			</MultiInput>
+		);
+
+		cy.get("[ui5-multi-input]")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		cy.get("@input")
+			.realClick();
+
+		cy.get("@input")
+			.realType("b");
+
+		cy.get("[ui5-multi-input]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		cy.get("[ui5-multi-input]")
+			.find("[ui5-suggestion-item]")
+			.should("have.length", 3)
+			.should("be.visible");
+
+		cy.get("@popover")
+			.find("[ui5-list].ui5-tokenizer-list")
+			.should("not.exist");
+	});
+
 	it("Tokens should not have delete icon when MI is readonly", () => {
 		cy.mount(
 			<MultiInput id="readonly-mi" readonly>

packages/main/src/MultiInput.ts

@@ -16,6 +16,7 @@ import {
 	isEnter,
 
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 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";
@@ -235,8 +236,6 @@ class MultiInput extends Input implements IFormInputElement {
 	}
 
 	innerFocusIn() {
-		this.tokenizer._scrollToEndOnExpand = true;
-		this.tokenizer.expanded = true;
 		this.focused = true;
 
 		this.tokens.forEach(token => {
@@ -369,20 +368,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
+	 * Override the _handlePickerAfterOpen method to handle token display based on device type
 	 */
 	_handlePickerAfterOpen() {
 		if (this.tokens.length > 0) {
-			this._showTokensInSuggestions = true;
+			// On mobile: show tokens by default (for filter dialog feature)
+			// On desktop: keep showing suggestions (default behavior)
+			if (isPhone()) {
+				this._showTokensInSuggestions = true;
+			}
 			this._userToggledShowTokens = false;
+
+			// Expand tokenizer to show all tokens and prevent cut-off
+			this.tokenizer._scrollToEndOnExpand = true;
+			this.tokenizer.expanded = true;
 		}
 
 		super._handlePickerAfterOpen();
@@ -469,20 +471,15 @@ class MultiInput extends Input implements IFormInputElement {
 
 	/**
 	 * Computes the effective state for showing tokens in suggestions.
-	 * Defaults to true when tokens exist, but respects explicit user toggle.
+	 * Returns false (show suggestions) by default, true only when explicitly set.
 	 */
 	get _effectiveShowTokensInSuggestions() {
-		// If no tokens exist, always false
+		// If no tokens exist, always show suggestions
 		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 the current state (will be true on mobile after picker opens, false otherwise)
 		return this._showTokensInSuggestions;
 	}
 }