diff --git a/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx
index 8878f18671e2..1cea9f293e9e 100644
--- a/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx
+++ b/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(
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ 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");
+ });
});
diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index a95b34fc896d..baf9526d27e7 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/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;
+ @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("[ui5-list]")?.focusFirstItem();
+ this._list?.focusFirstItem();
this._focusRecentlyUsedControl();