fix(ui5-file-uploader): adjust tokenizer collapse behaviour (#12250)

* fix(ui5-file-uploader): adjust tokenizer collapse behaviour

Issue:
- The ui5-tokenizer doesn't collapse when the n-More popover
gets closed via mouse out.

Author: unazko

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

@@ -419,6 +419,62 @@ describe("Interaction", () => {
 			.find("[ui5-token]")
 			.should("have.length", 1);
 	});
+
+	it("tokenizer collapses when n-More popover loses focus", () => {
+		cy.mount(
+			<FileUploader id="uploader" style="width: 200px;"></FileUploader>
+		);
+
+		cy.get("[ui5-file-uploader]")
+			.as("uploader")
+			.shadow()
+			.find("input[type='file']")
+			.selectFile([
+				{
+					contents: Cypress.Buffer.from("file1 content"),
+					fileName: "file1.txt",
+					mimeType: "text/plain"
+				},
+				{
+					contents: Cypress.Buffer.from("file2 content"),
+					fileName: "file11.txt", 
+					mimeType: "text/plain"
+				},
+				{
+					contents: Cypress.Buffer.from("file3 content"),
+					fileName: "file111.txt",
+					mimeType: "text/plain"
+				}
+			], { force: true });
+
+		cy.get("@uploader")
+			.shadow()
+			.find("[ui5-tokenizer]")
+			.as("tokenizer")
+			.should("exist");
+
+		cy.get("@uploader").realClick();
+		cy.get("@uploader").realPress("ArrowRight");
+
+		cy.focused()
+			.should("have.attr", "aria-description", "Token");
+
+		cy.realPress(["Control", "i"]);
+
+		cy.get("@tokenizer")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.should("exist");
+
+		cy.get("@tokenizer")
+			.should("have.attr", "expanded");
+
+		cy.get("body")
+			.realClick();
+
+		cy.get("@tokenizer")
+			.should("not.have.attr", "expanded");
+	});
 });
 
 describe("Accessibility", () => {

packages/main/src/FileUploader.ts

@@ -426,7 +426,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 
 		this.focused = false;
 		if (this._tokenizer) {
-			this._tokenizer.expanded = this._tokenizerOpen;
+			this._tokenizer.expanded = this._tokenizer.open;
 		}
 	}
 
@@ -667,7 +667,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 	}
 
 	get shouldOpenValueStateMessagePopover(): boolean {
-		return this.focused && this.hasValueState && !this.hideInput && !this._tokenizerOpen;
+		return this.focused && this.hasValueState && !this.hideInput && !this._tokenizer?.open;
 	}
 
 	/**