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

Fixes: #10555

Author: GDamyanov

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]")
+			.first()
+			.shadow()
+			.find("span[part=title]")
+			.realClick();
+
+		cy.get("@vsd")
+			.shadow()
+			.find("[ui5-li]")
+			.first()
+			.should("be.focused");
+	});
 });

packages/fiori/src/ViewSettingsDialog.ts

@@ -3,6 +3,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
@@ -13,6 +14,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";
@@ -248,6 +250,9 @@ class ViewSettingsDialog extends UI5Element {
 	@slot()
 	filterItems!: Array<FilterItem>;
 
+	@query("[ui5-list]")
+	_list!: List;
+
 	_dialog?: Dialog;
 	_sortOrder?: List;
 	_sortBy?: List;
@@ -265,6 +270,14 @@ class ViewSettingsDialog extends UI5Element {
 		}
 	}
 
+	onAfterRendering() {
+		if (this.isModeFilter) {
+			renderFinished().then(() => {
+				this._list?.focusFirstItem();
+			});
+		}
+	}
+
 	onInvalidation(changeInfo: ChangeInfo) {
 		if (changeInfo.type === "slot") {
 			this._confirmedSettings = this._settings;
@@ -506,7 +519,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	afterDialogOpen(): void {
-		this._dialog?.querySelector<List>("[ui5-list]")?.focusFirstItem();
+		this._list?.focusFirstItem();
 
 		this._focusRecentlyUsedControl();