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