Fixed Date Widget position in rtl

adobe · Oct 15, 2024 · 899ab22 · 899ab22
1 parent 858282c
commit 899ab22
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/...s/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js b/...s/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
@@ -580,6 +580,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
           windowScrollY = window.scrollY,
           windowInnerHeight = window.innerHeight,
           windowInnerWidth = window.innerWidth,
+          inputRect = $elem.getBoundingClientRect(),
           height = $elem.offsetHeight,
           top = this.#getOffset($elem).top + height,
           left = this.#getOffset($elem).left,
@@ -606,7 +607,12 @@ if (typeof window.DatePickerWidget === 'undefined') {
       this.#dp.style.left = styles.left;
       const localeObj = new Intl.Locale(this.#lang);
       if(localeObj?.textInfo?.direction == "rtl") {
-        this.#dp.style.right = styles.left;
+        let right = windowInnerWidth - (left + inputRect.width); // Calculate right offset
+        if (right + 433 > windowInnerWidth) { // 433 is the widget's width
+          // Align with the right edge of the viewport
+          right = windowScrollX + windowInnerWidth - 433 - 20; // Adjust with a 20px margin
+      }
+        this.#dp.style.right = right + "px";
         this.#dp.style.left = "unset"
       }
       return this;

diff --git a/.../main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html b/.../main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html
@@ -48,7 +48,8 @@
               placeholder="${text.placeHolder}"
               autocomplete="${text.autoComplete}"
               minlength="${text.minLength}"
-              maxlength="${text.maxLength}"></textarea>
+              maxlength="${text.maxLength}"
+              dir="auto"></textarea>
     <input data-sly-test="${!useTextarea}"
            title="${text.tooltipVisible ? '' : text.tooltipText}"
            class="cmp-adaptiveform-textinput__widget"

diff --git a/...mage_snapshots__/Form Runtime with Date Picker snapshot testing for rtl #0.png b/...mage_snapshots__/Form Runtime with Date Picker snapshot testing for rtl #0.png
diff --git a/ui.tests/test-module/specs/datepicker/datepicker.runtime.persian.locale.cy.js b/ui.tests/test-module/specs/datepicker/datepicker.runtime.persian.locale.cy.js
@@ -40,6 +40,7 @@ describe("Form Runtime with Date Picker", () => {
     // Year should be in Buddhist calendar year for Thai language
     it("Test localisation for date picker for Persian", () => {
         const [datePicker8, datePicker7FieldView] = Object.entries(formContainer._fields)[8];
+        console.log(Object.entries(formContainer._fields)[8], 'form-container');
         cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
             let todayDate = new Date();
             cy.get(".dp-caption").invoke("text").should("eq", "مارس, 2024");
@@ -49,6 +50,16 @@ describe("Form Runtime with Date Picker", () => {
         });
     });
 
+    it("snapshot testing for rtl", () => {
+        const [datePicker8, datePicker8FieldView] = Object.entries(formContainer._fields)[8];
+        cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click();
+        cy.get('body').toMatchImageSnapshot({
+            imageConfig: {
+              threshold: 0,
+            },
+          });  
+    });
+