fix(ui5-form-item): update host element display (#12208)

The isElementHidden method called internally by getFirstFocusableElement returns true on Safari for the ui5-form-item, considering the element as hidden, skipping the traverse of its children. This happens, because el.offsetHight and offsetWidth for the host custom element (ui5-form-item custom element in the specific issue) are 0 on Safari.
This probably happens for other components - Safari's layout engine doesn't always calculate dimensions correctly for the host element when content is in shadow DOM.
Solution - add display to the host element.

Fixes: #12201

Author: ilhan007

packages/base/cypress/specs/util/FocusableElements.cy.tsx

@@ -1,16 +1,22 @@
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+
+import Label from "@ui5/webcomponents/dist/Label.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Form from "@ui5/webcomponents/dist/Form.js";
+import FormItem from "@ui5/webcomponents/dist/FormItem.js";
 import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
 import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
 import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
-import Input from "@ui5/webcomponents/dist/Input.js";
 
 describe("FocusableElements", () => {
 	it("Tests first focusable element", () => {
 		cy.mount(
 			<>
 				<div id="container">
-					<Input tabindex="-1"></Input>
+					<Input tabindex={-1}></Input>
 					<br/>
 					<SideNavigation>
 						<SideNavigationItem
@@ -38,11 +44,71 @@ describe("FocusableElements", () => {
 			.should("have.attr", "tabindex", "0");
 
 		cy.get("#container").then( async ($container) => {
-		   const firstFocusable = await getFirstFocusableElement($container.get(0));
+		   const firstFocusable = await getFirstFocusableElement($container.get(0)!);
 		   await firstFocusable?.focus();
 		});
 
 		cy.get("#subItem1")
 			.should("have.focus");
 	});
+
+	it("Tests first focusable element inside Dialog with focusable content", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Dialog" open={true}>
+				<Form headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name:</Label>
+						<Input id="nameInp"/>
+					</FormItem>
+					
+					<FormItem>
+						<Label slot="labelContent">ZIP Code/City:</Label>
+						<Input value="411"/>
+					</FormItem>
+				</Form>
+
+				<div slot="footer" class="dialogFooter">
+					<Button design="Emphasized">Close</Button>
+				</div>
+			</Dialog>
+		);
+
+		cy.get("#dialog").then( async ($container) => {
+		   const firstFocusable = await getFirstFocusableElement($container.get(0)!);
+		   await firstFocusable?.focus();
+		});
+
+		cy.get("#nameInp")
+			.should("have.focus");
+	});
+
+	it("Tests first focusable element inside Dialog with focusable footer", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Dialog" open={true}>
+				<Form headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name:</Label>
+						<Text>Richard</Text>
+					</FormItem>
+					
+					<FormItem>
+						<Label slot="labelContent">ZIP Code/City:</Label>
+						<Text>New York</Text>
+					</FormItem>
+				</Form>
+
+				<div slot="footer" class="dialogFooter">
+					<Button id="btnClose" design="Emphasized">Close</Button>
+				</div>
+			</Dialog>
+		);
+
+		cy.get("#dialog").then( async ($container) => {
+		   const firstFocusable = await getFirstFocusableElement($container.get(0)!);
+		   await firstFocusable?.focus();
+		});
+
+		cy.get("#btnClose")
+			.should("have.focus");
+	});
 });

packages/main/src/themes/FormItem.css

@@ -1,3 +1,8 @@
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+}
+
 :host([column-span="1"]) {
 	grid-column: span 1;
 }