From 9684efb6e5a9bca3fa7156d6b1cbd932874dbc64 Mon Sep 17 00:00:00 2001 From: Siyana Todorova Date: Tue, 16 Sep 2025 15:53:34 +0300 Subject: [PATCH 1/2] fix(ui5-dialog): top-right corner no longer shifts when resizing in RTL mode fixes: #12310 --- packages/main/cypress/specs/Dialog.cy.tsx | 60 +++++++++++++++++++++++ packages/main/src/Dialog.ts | 7 +-- packages/main/test/pages/Dialog.html | 16 ++++++ 3 files changed, 80 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/Dialog.cy.tsx b/packages/main/cypress/specs/Dialog.cy.tsx index 0520bb89aa8a..eadde79c77b6 100644 --- a/packages/main/cypress/specs/Dialog.cy.tsx +++ b/packages/main/cypress/specs/Dialog.cy.tsx @@ -694,6 +694,66 @@ describe("Dialog general interaction", () => { }); }); + it("dialog remains anchored after resizing in RTL mode", () => { + cy.mount( + <> +
+ +
Header
+
Content Content Content Content Content Content Content Content Content Content Content Content
+ + +
+ + ); + + // Open dialog + cy.get("#rtl-min-width-dialog").invoke("attr", "open", true); + cy.get("#rtl-min-width-dialog").ui5DialogOpened(); + + // Capture initial dimensions and position + cy.get("#rtl-min-width-dialog").then(dialog => { + const initialLeft = parseInt(dialog.css("left")); + const initialWidth = parseInt(dialog.css("width")); + const initialRightEdge = initialLeft + initialWidth; + + // First resize to reach minimum width + cy.get("#rtl-min-width-dialog") + .shadow() + .find(".ui5-popup-resize-handle") + .realMouseDown() + .realMouseMove(800, 0) // Large movement to ensure we hit min width + .realMouseUp(); + + cy.get("#rtl-min-width-dialog").then(dialogAtMinWidth => { + const leftAtMinWidth = parseInt(dialogAtMinWidth.css("left")); + const widthAtMinWidth = parseInt(dialogAtMinWidth.css("width")); + const rightEdgeAtMinWidth = leftAtMinWidth + widthAtMinWidth; + + expect(widthAtMinWidth).to.equal(320); + expect(rightEdgeAtMinWidth).to.equal(initialRightEdge); + + cy.get("#rtl-min-width-dialog") + .shadow() + .find(".ui5-popup-resize-handle") + .realMouseDown() + .realMouseMove(150, 0) // Additional rightward movement beyond min width + .realMouseUp(); + + cy.get("#rtl-min-width-dialog").then(dialogAfterExtraResize => { + const finalLeft = parseInt(dialogAfterExtraResize.css("left")); + const finalWidth = parseInt(dialogAfterExtraResize.css("width")); + const finalRightEdge = finalLeft + finalWidth; + + expect(finalLeft).to.equal(leftAtMinWidth, "Dialog left position should not change when at min width"); + expect(finalWidth).to.equal(widthAtMinWidth, "Dialog width should remain at min width"); + expect(finalRightEdge).to.equal(rightEdgeAtMinWidth, "Dialog right edge should remain fixed"); + expect(finalRightEdge).to.equal(initialRightEdge, "Dialog right edge should remain fixed from initial position"); + }); + }); + }); + }); + it("resizable - keyboard support", () => { cy.mount( <> diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index a262df434f38..c9e65fe7c769 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -608,10 +608,11 @@ class Dialog extends Popup { this._initialLeft! + this._initialWidth!, ); + const rightEdge = this._initialLeft! + this._initialWidth!; newLeft = clamp( - this._initialLeft! + (clientX - this._initialX!), + rightEdge - newWidth, 0, - this._initialX! + this._initialWidth! - this._minWidth!, + rightEdge - this._minWidth!, ); } else { newWidth = clamp( @@ -630,7 +631,7 @@ class Dialog extends Popup { Object.assign(this.style, { height: `${newHeight}px`, width: `${newWidth}px`, - left: newLeft ? `${newLeft}px` : undefined, + left: this._isRTL ? `${newLeft}px` : undefined, }); } diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index b22a9d3d7108..8623ec3320c3 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -79,6 +79,9 @@ Open draggable & resizable dialog

+ Open RTL draggable & resizable dialog +
+
Open dialog which is created dynamically

@@ -411,6 +414,17 @@ +
+ +

Move this dialog around the screen by dragging it by its header.

+

Resize this dialog by dragging it by its resize handle.

+

These features are available only on Desktop.

+ + + + +
+