From 5172ea0fe3efbca0cb1b5f1b0425bff80955297d Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Thu, 8 May 2025 14:24:00 +0300 Subject: [PATCH] feat(ui5-list): focus() now focuses item --- packages/main/cypress/specs/List.cy.tsx | 51 +++++++++++++++++++++++++ packages/main/src/List.ts | 4 ++ 2 files changed, 55 insertions(+) diff --git a/packages/main/cypress/specs/List.cy.tsx b/packages/main/cypress/specs/List.cy.tsx index 27bbf5ce642f..4f417b5fbec2 100644 --- a/packages/main/cypress/specs/List.cy.tsx +++ b/packages/main/cypress/specs/List.cy.tsx @@ -1,3 +1,4 @@ +import type UI5Element from "@ui5/webcomponents-base"; import List from "../../src/List.js"; import ListItemStandard from "../../src/ListItemStandard.js"; @@ -256,3 +257,53 @@ describe("List - Wrapping Behavior", () => { .should("not.exist"); }); }); + +describe("List - getFocusDomRef Method", () => { + it("should return undefined when the list is empty", () => { + cy.mount(); + + cy.get("[ui5-list]") + .then(($el) => { + expect($el[0].getFocusDomRef()).to.be.undefined; + }); + }); + + it("should return first item if no item was focused before", () => { + cy.mount( + + Item 1 + Item 2 + Item 3 + + ); + + cy.get("[ui5-list], #item1") + .then(($el) => { + const list = $el[0]; + const item = $el[1]; + + expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef()); + }); + }); + + it("should return last focused item in the list", () => { + cy.mount( + + Item 1 + Item 2 + Item 3 + + ); + + cy.get("#item2").click(); + cy.get("#item2").should("be.focused"); + + cy.get("[ui5-list], #item2") + .then(($el) => { + const list = $el[0]; + const item = $el[1]; + + expect(list.getFocusDomRef()).to.equal(item.getFocusDomRef()); + }); + }); +}); diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 1de99b6cf2df..9c5a267a38f0 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -615,6 +615,10 @@ class List extends UI5Element { }); } + getFocusDomRef() { + return this._itemNavigation._getCurrentItem(); + } + get shouldRenderH1() { return !this.header.length && this.headerText; }