Skip to content

fix(ui5-list): growing with scroll improved #12087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 5, 2025
Merged

fix(ui5-list): growing with scroll improved #12087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1cb9dcd
fix(ui5-list): growing with scroll improved
dobrinyonkov Aug 14, 2025
8c95337
Merge branch 'main' into fix/list-scroll-growing-with-start-marker
dobrinyonkov Aug 15, 2025
bd5dc85
Merge remote-tracking branch 'origin/main' into fix/list-scroll-growi…
dobrinyonkov Sep 1, 2025
8251fa8
fix: only observ if grows on scroll is true
dobrinyonkov Sep 1, 2025
bf1ece7
Merge branch 'main' into fix/list-scroll-growing-with-start-marker
dobrinyonkov Sep 4, 2025
58534e2
chore: optimize list start end unobserve code
dobrinyonkov Sep 5, 2025
75ce285
Merge branch 'main' into fix/list-scroll-growing-with-start-marker
dobrinyonkov Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 154 additions & 62 deletions packages/main/cypress/specs/List.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,17 @@ import Select from "../../src/Select.js";
import Option from "../../src/Option.js";
import CheckBox from "../../src/CheckBox.js";

describe("List Tests", () => {
it("tests 'loadMore' event fired upon infinite scroll", () => {
cy.mount(
<List style="height: 300px;" growing="Scroll">
<ListItemStandard>Laptop Lenovo</ListItemStandard>
<ListItemStandard>IPhone 3</ListItemStandard>
<ListItemStandard>HP Monitor 24</ListItemStandard>
<ListItemStandard>Audio cabel</ListItemStandard>
<ListItemStandard>DVD set</ListItemStandard>
<ListItemStandard>HP Monitor 24</ListItemStandard>
<ListItemStandard>Audio cabel</ListItemStandard>
<ListItemStandard id="lastItem">Last Item</ListItemStandard>
</List>);

cy.get("[ui5-list]")
.as("list");

cy.get<List>("@list")
.then(list => {
list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
})
.shadow()
.find(".ui5-list-scroll-container")
.as("scrollContainer")
.scrollTo("bottom", { duration: 100 });

cy.get("@loadMore")
.should("have.been.calledOnce");
});
function getGrowingWithScrollList(length: number, height: string = "100px") {
return (
<List growing="Scroll" style={{ height }}>
{Array.from({ length }, (_, index) => (
<ListItemStandard key={index}>Item {index + 1}</ListItemStandard>
))}
</List>
);
}

describe("List Tests", () => {
it("Arrow down and up navigation between last item and growing button", () => {
cy.mount(
<List growing="Button">
Expand Down Expand Up @@ -193,6 +174,150 @@ describe("List Tests", () => {
});
});

describe("List - Growing with scroll", () => {
it("tests 'loadMore' event not fired initially when the list did not overflow", () => {
cy.mount(
<div>
<input value="0" />
<List growing="Scroll">
<ListItemGroup headerText="New Items" />
</List>
</div>
);

cy.get("input").should("have.value", "0");
});
it("tests start marker is present in DOM", () => {
cy.mount(getGrowingWithScrollList(5));
cy.get("[ui5-list]")
.shadow()
.find(".ui5-list-start-marker")
.should("exist")
.should("have.attr", "tabindex", "-1")
.should("have.attr", "aria-hidden", "true");
});

it("tests end marker is present in DOM", () => {
cy.mount(getGrowingWithScrollList(5));
cy.get("[ui5-list]")
.shadow()
.find(".ui5-list-end-marker")
.should("exist")
.should("have.attr", "tabindex", "-1")
.should("have.attr", "aria-hidden", "true");
});

it("End marker has correct CSS properties", () => {
cy.mount(getGrowingWithScrollList(5));
cy.get("[ui5-list]")
.shadow()
.find(".ui5-list-end-marker")
.should("have.css", "display", "inline-block");
});

it("tests start marker observation works when scrolled", () => {
cy.mount(getGrowingWithScrollList(5));
cy.get("[ui5-list]").as("list");

// Initially, start marker should be in view, so _startMarkerOutOfView should be false
cy.get<List>("@list")
.should(($el) => {
const list = $el.get(0);
expect(list._startMarkerOutOfView).to.be.false;
});

// Scroll down so start marker goes out of view
cy.get("@list")
.shadow()
.find(".ui5-list-scroll-container")
.scrollTo(0, 200, { duration: 100 });

cy.get<List>("@list")
.should(($el) => {
const list = $el.get(0);
expect(list._startMarkerOutOfView).to.be.true;
});
});

it("tests end marker observation works when scrolled to bottom as load-more is being fired", () => {
cy.mount(getGrowingWithScrollList(5));
cy.get("[ui5-list]").as("list");

cy.get<List>("@list")
.then(list => {
list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
});

// Scroll to bottom so end marker becomes visible
cy.get("@list")
.shadow()
.find(".ui5-list-scroll-container")
.scrollTo("bottom", { duration: 100 });

// The load-more event should be fired when end marker becomes visible
// (assuming start marker is also out of view due to scrolling)
cy.get("@loadMore")
.should("have.been.called");
});

it("tests rerender/content change does not fire load-more event if conditions are met", () => {
cy.mount(
<div style="height: 6rem; overflow: auto; border: 1px solid black">
{getGrowingWithScrollList(5, "")}
</div>
);

cy.get("[ui5-list]").as("list");

cy.get<List>("@list")
.then(list => {
list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
});

// Scroll the container to bottom to meet the conditions
cy.get("@list")
.parent()
.scrollTo("bottom", { duration: 100 });

cy.get("@loadMore").invoke("resetHistory");

// Simulate rerender by replacing content
cy.get<List>("@list")
.then(($list) => {
$list[0].innerHTML = '<ui5-li>New Item</ui5-li>';
});

cy.get("@loadMore")
.should("not.have.been.called");
});

it("tests load-more event fires when the scrollable container is a parent element", () => {
cy.mount(
<div id="scrollable-container" style="height: 150px; overflow-y: auto;">
<List growing="Scroll">
{getGrowingWithScrollList(5, "")}
</List>
</div>
);

cy.get("[ui5-list]").as("list");

// Set up load-more event listener
cy.get<List>("@list")
.then(list => {
list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
});

// Scroll the parent container (not the list itself) to bottom
cy.get("#scrollable-container")
.scrollTo("bottom", { duration: 100 });

// The load-more event should still fire because intersection observers use viewport
cy.get("@loadMore")
.should("have.been.called");
});
});

describe("List - Accessibility", () => {
it("tests active state announcement", () => {
cy.mount(
Expand Down Expand Up @@ -1180,19 +1305,6 @@ describe("List Tests", () => {
cy.get("[ui5-li]").first().should("be.focused");
});

it("tests 'loadMore' event not fired initially when the list did not overflow", () => {
cy.mount(
<div>
<input value="0" />
<List growing="Scroll">
<ListItemGroup headerText="New Items" />
</List>
</div>
);

cy.get("input").should("have.value", "0");
});

it("detailPress event is fired", () => {
cy.mount(
<div>
Expand Down Expand Up @@ -1638,26 +1750,6 @@ describe("List Tests", () => {
.should("have.attr", "tabindex", "0");
});

it("End marker has correct CSS properties", () => {
cy.mount(
<List growing="Scroll">
<ListItemStandard>Laptop Lenovo</ListItemStandard>
<ListItemStandard>IPhone 3</ListItemStandard>
<ListItemStandard>HP Monitor 24</ListItemStandard>
<ListItemStandard>Audio cabel</ListItemStandard>
<ListItemStandard>DVD set</ListItemStandard>
<ListItemStandard>HP Monitor 24</ListItemStandard>
<ListItemStandard>Audio cabel</ListItemStandard>
<ListItemStandard>Last Item</ListItemStandard>
</List>
);

cy.get("[ui5-list]")
.shadow()
.find(".ui5-list-end-marker")
.should("have.css", "display", "inline-block");
});

it("Checks if tooltip property value equals the title of li element", () => {
cy.mount(
<List headerText="API: ListItem tooltip">
Expand Down
Loading
Loading