Fixed Date Widget position in rtl (#1442)

Co-authored-by: Pavitra Khatri <pavitrakhatri@pavitras-mbp.corp.adobe.com>

Author: pavi41

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/css/datepickerwidget.css

@@ -154,7 +154,7 @@
 
 .cmp-adaptiveform-datepicker__calendar-icon {
     position: absolute;
-    top: 50%;
+    top: 41px;
     right: 30px;
     z-index: 10;
     background: url("/etc.clientlibs/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/resources/calendar.png") no-repeat center center;

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js

@@ -546,10 +546,10 @@ if (typeof window.DatePickerWidget === 'undefined') {
         this.#dp.getElementsByClassName("dp-clear")[0].getElementsByTagName(
             "a")[0].innerText = this.#options.locale.clearText;
         this.#layout(this.#defaultView);
-        this.#position();
         this.#dp.style.display = "flex";
         this.#focusedOnLi = false;
         DatePickerWidget.#visible = true;
+        this.#position();
         if (this.#options.showCalendarIcon) {
           this.#curInstance.$field.setAttribute('readonly', true);    // when the datepicker is active, deactivate the field
         }
@@ -580,33 +580,39 @@ 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,
           styles = {"top": (top + "px"), "left": (left + "px")},
-          diffBottom = top + 333 - windowInnerHeight - windowScrollY, //todo: hard-coded dp height to 333
+          diffBottom = top + this.#dp.offsetHeight - windowInnerHeight - windowScrollY, //this.#dp.offsetHeight is the widget's height
           newLeft,
           newTop;
       if (diffBottom > 0) {
         //can't appear at the bottom
         //check top
-        newTop = top - height - 333 - 20;
+        newTop = top - height - this.#dp.offsetHeight - 20;
         if (newTop < windowScrollY) {
           //can't appear at the top as well ... the datePicker pop up overlaps the date field
           newTop = top - diffBottom;
         }
         styles.top = newTop + "px";
       }
-      if (left + 433 > windowScrollX + windowInnerWidth) { //todo: hard-coding width to 433
+      if (left + this.#dp.offsetWidth > windowScrollX + windowInnerWidth) {
         //align with the right edge
-        newLeft = windowScrollX + windowInnerWidth - 433 - 20;
+        newLeft = windowScrollX + windowInnerWidth - this.#dp.offsetWidth - 20;
         styles.left = newLeft + "px";
       }
       this.#dp.style.top = styles.top;
       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 + this.#dp.offsetWidth > windowInnerWidth) { // this.#dp.offsetWidth is the widget's width
+          // Align with the right edge of the viewport
+          right = windowScrollX + windowInnerWidth - this.#dp.offsetWidth - 20; // Adjust with a 20px margin
+      }
+        this.#dp.style.right = right + "px";
         this.#dp.style.left = "unset"
       }
       return this;

ui.af.apps/src/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"

ui.tests/test-module/specs/datepicker/__image_snapshots__/Form Runtime with Date Picker snapshot testing #0.png

@@ -49,6 +49,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,
+            },
+          });  
+    });
+