fix(ui5-multi-input): prevent double value state message on nMore open (

#8638) * fix(ui5-multi-input): prevent double value state message on nMore open fixes: #8586
SAP · Apr 5, 2024 · ed7b3ba · ed7b3ba
1 parent 367ca80
commit ed7b3ba
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
@@ -399,6 +399,10 @@ class MultiInput extends Input {
 
 		return this;
 	}
+
+	get shouldDisplayOnlyValueStateMessage() {
+		return this.hasValueStateMessage && !this.readonly && !this.open && this.focused && !this.tokenizer._isOpen;
+	}
 }
 
 MultiInput.define();

diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -172,6 +172,7 @@ class Tokenizer extends UI5Element {
 	_itemNav: ItemNavigation;
 	_scrollEnablement: ScrollEnablement;
 	_expandedScrollWidth?: number;
+	_isOpen: boolean;
 
 	_handleResize() {
 		this._nMoreCount = this.overflownTokens.length;
@@ -188,6 +189,7 @@ class Tokenizer extends UI5Element {
 		});
 
 		this._scrollEnablement = new ScrollEnablement(this);
+		this._isOpen = false;
 	}
 
 	onBeforeRendering() {
@@ -220,6 +222,7 @@ class Tokenizer extends UI5Element {
 
 	async openMorePopover() {
 		(await this.getPopover()).showAt(this.morePopoverOpener || this);
+		this._isOpen = true;
 	}
 
 	_getTokens() {
@@ -616,6 +619,7 @@ class Tokenizer extends UI5Element {
 
 	async closeMorePopover() {
 		(await this.getPopover()).close(false, false, true);
+		this._isOpen = false;
 	}
 
 	get _nMoreText() {

diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
@@ -651,6 +651,21 @@ describe("Keyboard handling", () => {
 		assert.strictEqual(await mi.getProperty("valueState"), "None", "Value state is None");
 	});
 
+	it("value state message popup should be closed when nMore popover is open", async () => {
+		const mi = await $("#multiInput-error");
+		const inner = await mi.shadow$("input");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multiInput-error");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+
+		await mi.scrollIntoView();
+
+		// populate new token
+		await inner.click();
+		await inner.keys(["Control", "i"]);
+
+		assert.strictEqual(await popover.getProperty("opened"), false, "Value state popup is closed");
+	});
+
 	it("should open popover on keyboard combination ctrl + i", async () => {
 		const mi = await browser.$("#truncated-token");
 		const tokenizer = await mi.shadow$("ui5-tokenizer");