fix(ui5-multi-combobox): fix valueState background set while typing (#…

…10586) FIXES: #10454
SAP · Jan 24, 2025 · 06243e4 · 06243e4
1 parent 4b2ab63
commit 06243e4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/packages/main/cypress/specs/MultiComboBox.cy.ts b/packages/main/cypress/specs/MultiComboBox.cy.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type MultiComboBox from "../../src/MultiComboBox.js";
 
 describe("Security", () => {
 	it("tests setting malicious text to items", () => {
@@ -20,3 +21,40 @@ describe("Security", () => {
 			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
 	});
 });
+
+describe("Value State", () => {
+	it("should be able to change value states upon typing", () => {
+		cy.mount(html`
+			<ui5-multi-combobox no-validation>
+				<ui5-mcb-item text="Item 1"></ui5-mcb-item>
+				<ui5-mcb-item text="Item 2"></ui5-mcb-item>
+			</ui5-multi-combobox>
+		`);
+
+		// add event listener
+		cy.get("ui5-multi-combobox")
+			.then(mcb => {
+				mcb.get(0).addEventListener("input", e => {
+					(mcb.get(0) as MultiComboBox).valueState = (e.target as MultiComboBox).value.length ? "Negative" : "Information";
+				});
+			});
+
+		// type "f"
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.type("f");
+
+		cy.realPress("Backspace");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realPress("f");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find(".ui5-valuestatemessage--information")
+			.should("not.exist");
+	});
+});
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -2027,10 +2027,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage-header": true,
-				"ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (this._dialogInputValueState === ValueState.Positive),
-				"ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (this._dialogInputValueState === ValueState.Negative),
-				"ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (this._dialogInputValueState === ValueState.Critical),
-				"ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (this._dialogInputValueState === ValueState.Information),
+				"ui5-valuestatemessage--success": (this.valueState === ValueState.Positive) || (isPhone() && this._dialogInputValueState === ValueState.Positive),
+				"ui5-valuestatemessage--error": (this.valueState === ValueState.Negative) || (isPhone() && this._dialogInputValueState === ValueState.Negative),
+				"ui5-valuestatemessage--warning": (this.valueState === ValueState.Critical) || (isPhone() && this._dialogInputValueState === ValueState.Critical),
+				"ui5-valuestatemessage--information": (this.valueState === ValueState.Information) || (isPhone() && this._dialogInputValueState === ValueState.Information),
 			},
 		};
 	}