fix(datetime): RTL will no longer infinitily scroll

Resolves #24472
ionic-team · Dec 22, 2021 · aeaceed · aeaceed
1 parent ee488ff
commit aeaceed
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -670,6 +670,8 @@ export class Datetime implements ComponentInterface {
      */
     const months = calendarBodyRef.querySelectorAll('.calendar-month');
 
+    const isRTL = document.dir === 'rtl';
+
     const startMonth = months[0] as HTMLElement;
     const workingMonth = months[1] as HTMLElement;
     const endMonth = months[2] as HTMLElement;
@@ -681,7 +683,7 @@ export class Datetime implements ComponentInterface {
      * if element is not in viewport. Use scrollLeft instead.
      */
     writeTask(() => {
-      calendarBodyRef.scrollLeft = startMonth.clientWidth;
+      calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL ? -1 : 1);
 
       let endIO: IntersectionObserver | undefined;
       let startIO: IntersectionObserver | undefined;
@@ -760,7 +762,7 @@ export class Datetime implements ComponentInterface {
             year
           });
 
-          calendarBodyRef.scrollLeft = workingMonth.clientWidth;
+          calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL ? -1 : 1);
           calendarBodyRef.style.removeProperty('overflow');
           calendarBodyRef.style.removeProperty('pointer-events');
 
@@ -802,14 +804,14 @@ export class Datetime implements ComponentInterface {
       startIO = new IntersectionObserver(ev => ioCallback('start', ev), {
         threshold: mode === 'ios' ? [0.7, 1] : 1,
         root: calendarBodyRef
-       });
+      });
       startIO.observe(startMonth);
 
       this.destroyCalendarIO = () => {
         endIO?.disconnect();
         startIO?.disconnect();
       }
-   });
+    });
   }
 
   connectedCallback() {
@@ -995,9 +997,12 @@ export class Datetime implements ComponentInterface {
     const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
     if (!nextMonth) { return; }
 
+    const isRTL = document.dir === 'rtl';
+    const left = (nextMonth as HTMLElement).offsetWidth * 2;
+
     calendarBodyRef.scrollTo({
       top: 0,
-      left: (nextMonth as HTMLElement).offsetWidth * 2,
+      left: left * (isRTL ? -1 : 1),
       behavior: 'smooth'
     });
   }
@@ -1145,10 +1150,10 @@ export class Datetime implements ComponentInterface {
           <div class="calendar-next-prev">
             <ion-buttons>
               <ion-button onClick={() => this.prevMonth()}>
-                <ion-icon slot="icon-only" icon={chevronBack} lazy={false}></ion-icon>
+                <ion-icon slot="icon-only" icon={chevronBack} lazy={false} flipRtl={true}></ion-icon>
               </ion-button>
               <ion-button onClick={() => this.nextMonth()}>
-                <ion-icon slot="icon-only" icon={chevronForward} lazy={false}></ion-icon>
+                <ion-icon slot="icon-only" icon={chevronForward} lazy={false} flipRtl={true}></ion-icon>
               </ion-button>
             </ion-buttons>
           </div>
@@ -1249,7 +1254,7 @@ export class Datetime implements ComponentInterface {
     minutesItems: PickerColumnItem[],
     ampmItems: PickerColumnItem[],
     use24Hour: boolean
-   ) {
+  ) {
     const { color, activePartsClone, workingParts } = this;
 
     return (
@@ -1290,7 +1295,7 @@ export class Datetime implements ComponentInterface {
             ev.stopPropagation();
           }}
         ></ion-picker-column-internal>
-        { !use24Hour && <ion-picker-column-internal
+        {!use24Hour && <ion-picker-column-internal
           color={color}
           value={activePartsClone.ampm}
           items={ampmItems}
@@ -1311,7 +1316,7 @@ export class Datetime implements ComponentInterface {
 
             ev.stopPropagation();
           }}
-        ></ion-picker-column-internal> }
+        ></ion-picker-column-internal>}
       </ion-picker-internal>
     )
   }
@@ -1321,7 +1326,7 @@ export class Datetime implements ComponentInterface {
     minutesItems: PickerColumnItem[],
     ampmItems: PickerColumnItem[],
     use24Hour: boolean
-   ) {
+  ) {
     return [
       <div class="time-header">
         {this.renderTimeLabel()}
@@ -1411,7 +1416,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <div class="datetime-time">
-          {timeOnlyPresentation ? this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) : this.renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour)}
+        {timeOnlyPresentation ? this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) : this.renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour)}
       </div>
     )
   }

diff --git a/core/src/components/datetime/test/basic/e2e.ts b/core/src/components/datetime/test/basic/e2e.ts
@@ -79,3 +79,11 @@ describe('Footer', () => {
 });
 
 
+test('datetime:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});