diff --git a/src/components/dialog/bl-dialog.test.ts b/src/components/dialog/bl-dialog.test.ts index 7a0deaec..cc39b72f 100644 --- a/src/components/dialog/bl-dialog.test.ts +++ b/src/components/dialog/bl-dialog.test.ts @@ -286,6 +286,88 @@ describe("bl-dialog", () => { expect(footer.className).to.oneOf(["shadow", ""]); }); + it("should remove shadow from footer when hitting bottom", async () => { + window.innerWidth = 400; + + const el = await fixture(html` +

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+

+ Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in + section 1.10.32. +

+ Primary + Secondary +
+ `); + + const content = el.shadowRoot?.querySelector(".content") as HTMLElement; + const footer = el?.shadowRoot?.querySelector("footer") as HTMLElement; + + content.scrollTop = content.scrollHeight; + await new Promise(resolve => requestAnimationFrame(resolve)); + + expect(footer).to.not.have.class("shadow"); + }); + describe("Events", () => { it("should fire bl-dialog-open / close event on dialog open / close", async () => { const el = await fixture(html` diff --git a/src/components/dialog/bl-dialog.ts b/src/components/dialog/bl-dialog.ts index a7774259..ec96f75e 100644 --- a/src/components/dialog/bl-dialog.ts +++ b/src/components/dialog/bl-dialog.ts @@ -107,13 +107,15 @@ export default class BlDialog extends LitElement { document.body.style.overflow = "hidden"; this.toggleFooterShadow(); window?.addEventListener("keydown", event => this.onKeydown(event)); - window?.addEventListener("resize", () => this.toggleFooterShadow()); + window?.addEventListener("resize", this.toggleFooterShadow); + this.content?.addEventListener("scroll", this.toggleFooterShadow); } else { this.dialog?.close?.(); this.onClose({ isOpen: false }); document.body.style.overflow = "auto"; window?.removeEventListener("keydown", this.onKeydown); window?.removeEventListener("resize", this.toggleFooterShadow); + this.content?.removeEventListener("scroll", this.toggleFooterShadow); } } @@ -142,13 +144,17 @@ export default class BlDialog extends LitElement { } }; - private toggleFooterShadow() { - if (this.content?.scrollHeight > this.content?.offsetHeight) { - this.footer?.classList?.add("shadow"); - } else { + private toggleFooterShadow = () => { + const scrollTop = this.content?.scrollTop; + const scrollHeight = this.content?.scrollHeight; + const clientHeight = this.content?.clientHeight; + + if (scrollTop + clientHeight >= scrollHeight) { this.footer?.classList?.remove("shadow"); + } else { + this.footer?.classList?.add("shadow"); } - } + }; private renderFooter() { return this._hasFooter