diff --git a/packages/main/cypress/specs/ExpandableText.cy.tsx b/packages/main/cypress/specs/ExpandableText.cy.tsx index c83050b218a0..18ef33e4e8cb 100644 --- a/packages/main/cypress/specs/ExpandableText.cy.tsx +++ b/packages/main/cypress/specs/ExpandableText.cy.tsx @@ -173,6 +173,28 @@ describe("ExpandableText", () => { .should("exist"); }); + it("Scrolls toggle link into view on expansion", () => { + const text = "A".repeat(5000); + const maxCharacters = 5; + + cy.mount( +
+ +
+ ); + + cy.get("[ui5-expandable-text]").shadow().as("expTextShadow"); + cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle"); + + cy.get("@toggle") + .contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText) + .realClick(); + + cy.get("@toggle") + .contains(EXPANDABLE_TEXT_SHOW_LESS.defaultText) + .should("be.visible"); + }); + it("ARIA attributes", () => { const text = "This is a very long text that should be displayed"; diff --git a/packages/main/src/ExpandableText.ts b/packages/main/src/ExpandableText.ts index 543b3cacf52e..a5ec42add261 100644 --- a/packages/main/src/ExpandableText.ts +++ b/packages/main/src/ExpandableText.ts @@ -96,6 +96,8 @@ class ExpandableText extends UI5Element { @property({ type: Boolean }) _expanded = false; + _shouldScrollToToggle = false; + @i18n("@ui5/webcomponents") static i18nBundle: I18nBundle; @@ -166,8 +168,20 @@ class ExpandableText extends UI5Element { } } + onAfterRendering() { + if (this._shouldScrollToToggle) { + this._shouldScrollToToggle = false; + const toggleLink = this.shadowRoot?.querySelector("#toggle"); + toggleLink?.scrollIntoView?.({ block: "nearest" }); + } + } + _handleToggleClick() { this._expanded = !this._expanded; + + if (this._expanded && !this._usePopover) { + this._shouldScrollToToggle = true; + } } _handleCloseButtonClick(e: UI5CustomEvent) {