fix(ui5-dialog): fix RTL Dialog resizing to keep right edge anchored (#12313)

fixes: #12310

Author: s-todorova

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(
+			<>
+				<div dir="rtl">
+					<Dialog id="rtl-min-width-dialog" resizable>
+						<div id="header-slot" slot="header">Header</div>
+						<div>Content Content Content Content Content Content Content Content Content Content Content Content</div>
+						<Button id="resizable-close">Close</Button>
+					</Dialog>
+				</div>
+			</>
+		);
+
+		// Open dialog
+		cy.get("#rtl-min-width-dialog").invoke("attr", "open", true);
+		cy.get<Dialog>("#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(
 			<>

packages/main/src/Dialog.ts

@@ -614,11 +614,12 @@ class Dialog extends Popup {
 			});
 
 			const deltaWidth = newWidth - this.getBoundingClientRect().width;
+			const rightEdge = this._initialLeft! + this._initialWidth! + deltaWidth;
 
 			newLeft = clamp(
-				this._initialLeft! + (clientX - this._initialX!) + deltaWidth,
+				rightEdge - newWidth,
 				0,
-				this._initialX! + this._initialWidth! - this._minWidth!,
+				rightEdge - this._minWidth!,
 			);
 		} else {
 			newWidth = clamp(
@@ -637,7 +638,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,
 		});
 	}
 

packages/main/test/pages/Dialog.html

@@ -82,6 +82,12 @@
 		<ui5-button id="draggable-and-resizable-open">Open draggable & resizable dialog</ui5-button>
 		<br>
 		<br>
+		<ui5-button id="rtl-draggable-and-resizable-open">Open RTL draggable & resizable dialog</ui5-button>
+		<br>
+		<br>
+		<ui5-button id="rtl-maxwidth-resizable-open">Open RTL max-width resizable dialog</ui5-button>
+		<br>
+		<br>
 		<ui5-button id="dynamic-open">Open dialog which is created dynamically</ui5-button>
 		<br>
 		<br>
@@ -424,6 +430,28 @@
 		</div>
 	</ui5-dialog>
 
+	<div dir="rtl">
+		<ui5-dialog id="rtl-draggable-and-resizable-dialog" header-text="Draggable/Resizable dialog" draggable resizable>
+			<p>Move this dialog around the screen by dragging it by its header.</p>
+			<p>Resize this dialog by dragging it by its resize handle.</p>
+			<p>These features are available only on Desktop.</p>
+			<ui5-toolbar slot="footer">
+				<ui5-toolbar-button id="rtl-draggable-and-resizable-close" design="Emphasized" text="OK"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</ui5-dialog>
+	</div>
+
+	<div dir="rtl">
+		<ui5-dialog  style="max-width: 500px" id="rtl-maxwidth-resizable-dialog" header-text="Draggable/Resizable dialog" draggable resizable>
+			<p>Move this dialog around the screen by dragging it by its header.</p>
+			<p>Resize this dialog by dragging it by its resize handle.</p>
+			<p>These features are available only on Desktop.</p>
+			<ui5-toolbar slot="footer">
+				<ui5-toolbar-button id="rtl-maxwidth-resizable-close" design="Emphasized" text="OK"></ui5-toolbar-button>
+			</ui5-toolbar>
+		</ui5-dialog>
+	</div>
+
 	<ui5-popover header-text="My Heading" id="pop" class="dialog8auto" placement="Top">
 		<!-- <div slot="header">
 			Hello World
@@ -953,6 +981,10 @@
 		window["resizable-custom-header-close"].addEventListener("click", function () { window["resizable-dialog-custom-header"].open = false; });
 		window["draggable-and-resizable-open"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = true; });
 		window["draggable-and-resizable-close"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = false; });
+		window["rtl-draggable-and-resizable-open"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = true; });
+		window["rtl-draggable-and-resizable-close"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = false; });
+		window["rtl-maxwidth-resizable-open"].addEventListener("click", function () { window["rtl-maxwidth-resizable-dialog"].open = true; });
+		window["rtl-maxwidth-resizable-close"].addEventListener("click", function () { window["rtl-maxwidth-resizable-dialog"].open = false; });
 
 		window["dynamic-open"].addEventListener("click", function () {
 			var dialog = document.createElement("ui5-dialog"),