fix(ui5-view-settings-dialog): initially focus first item in filter options

packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx

@@ -370,4 +370,41 @@ describe("ViewSettingsDialog Tests", () => {
 		cy.get("@vsd")
 			.invoke("prop", "open", false);
 	});
+
+	it("should focus first item in filter options", () => {
+		cy.mount(
+			<ViewSettingsDialog id="vsdFilter">
+				<FilterItem slot="filterItems" text="Filter 1">
+					<FilterItemOption id="focusedItem" slot="values" text="Some filter 1"></FilterItemOption>
+					<FilterItemOption slot="values" text="Some filter 2"></FilterItemOption>
+					<FilterItemOption slot="values" text="Some filter 3"></FilterItemOption>
+				</FilterItem>
+				<FilterItem slot="filterItems" text="Filter 2">
+					<FilterItemOption slot="values" text="Some filter 4"></FilterItemOption>
+					<FilterItemOption slot="values" text="Some filter 5"></FilterItemOption>
+					<FilterItemOption slot="values" text="Some filter 6"></FilterItemOption>
+				</FilterItem>
+			</ViewSettingsDialog>
+		);
+
+		cy.get("#vsdFilter")
+			.as("vsd");
+
+		cy.get("@vsd")
+			.invoke("prop", "open", true);
+
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.eq(0)
+			.shadow()
+			.find("span[part=title]")
+			.realClick();
+
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.eq(0)
+			.should("be.focused");
+	});
 });

packages/fiori/src/ViewSettingsDialog.ts

@@ -13,6 +13,7 @@ import type List from "@ui5/webcomponents/dist/List.js";
 import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 
 import ViewSettingsDialogMode from "./types/ViewSettingsDialogMode.js";
 import "@ui5/webcomponents-icons/dist/sort.js";
@@ -265,6 +266,14 @@ class ViewSettingsDialog extends UI5Element {
 		}
 	}
 
+	onAfterRendering() {
+		if (this.isModeFilter && this._filterStepTwo) {
+			renderFinished().then(() => {
+				this._dialog?.querySelector<List>("[ui5-list]")?.focusFirstItem();
+			});
+		}
+	}
+
 	onInvalidation(changeInfo: ChangeInfo) {
 		if (changeInfo.type === "slot") {
 			this._confirmedSettings = this._settings;