fix(popups): fix finding initial focus when Tokenizer is placed (#11761)

* fix(popups): fix finding initial focus

Author: TeodorTaushanov

packages/base/src/util/isElementHidden.ts

@@ -3,7 +3,9 @@ const isElementHidden = (el: HTMLElement) => {
 		return false;
 	}
 
-	return (el.offsetWidth <= 0 && el.offsetHeight <= 0) || (window.getComputedStyle(el).visibility === "hidden");
+	const computedStyle = window.getComputedStyle(el);
+
+	return (computedStyle.display !== "contents" && (el.offsetWidth <= 0 && el.offsetHeight <= 0)) || (computedStyle.visibility === "hidden");
 };
 
 export default isElementHidden;

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

@@ -3,6 +3,8 @@ import Dialog from "../../src/Dialog.js";
 import Label from "../../src/Label.js";
 import Toolbar from "../../src/Toolbar.js";
 import ToolbarButton from "../../src/ToolbarButton.js";
+import Tokenizer from "../../src/Tokenizer.js";
+import Token from "../../src/Token.js";
 
 describe("Keyboard", () => {
 	it("TAB navigation", () => {
@@ -82,6 +84,35 @@ describe("Keyboard", () => {
 	});
 });
 
+describe("Initial Focus", () => {
+	it("Tokenizer focusing", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialogId" headerText="Tokens">
+					<Tokenizer id="tokenizer">
+						<Token text="Token 1" id="token1"/>
+						<Token text="Token 2" id="token2"/>
+					</Tokenizer>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#token1")
+			.shadow()
+			.find(".ui5-token--wrapper")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#dialogId")
+			.invoke("prop", "open", true);
+
+		cy.get("#token1")
+			.should("be.visible");
+
+		cy.get("#token1")
+			.should("be.focused");
+	});
+});
+
 describe("Accessibility", () => {
 	it("Dialog accessibleDescriptionRef Tests", () => {
 		cy.mount(

packages/main/test/pages/Dialog.html

@@ -680,6 +680,15 @@
 	</ui5-dialog>
 	<br>
 	<br>
+	<ui5-button onclick="dialogWithTokenizer.open = true;">Open Dialog With Tokenizer</ui5-button>
+	<ui5-dialog id="dialogWithTokenizer" header-text="Tokens">
+		<ui5-tokenizer id="tokenizer">
+			<ui5-token text="Token 1"></ui5-token>
+			<ui5-token text="Token 2"></ui5-token>
+		</ui5-tokenizer>
+	</ui5-dialog>
+	<br>
+	<br>
 	<div>
 		<ui5-title level="H3">Open Dialog from list</ui5-title>
 		<ui5-list id="listContainerId" selection-mode="Single">