From 41b56e4072b6d5832c1f9e31196dcce4fe8632aa Mon Sep 17 00:00:00 2001
From: Xu Chao <304093931@qq.com>
Date: Tue, 25 Oct 2022 11:37:36 +0800
Subject: [PATCH] fix(module:date-picker): arrow in wrong position for RTL
 direction (#7690)

---
 .../date-picker/date-range-popup.component.ts |  8 ++++++-
 .../range-picker.component.spec.ts            | 24 +++++++++++++++++++
 components/date-picker/style/patch.less       |  5 ++++
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/components/date-picker/date-range-popup.component.ts b/components/date-picker/date-range-popup.component.ts
index c463c7dc50..377747c562 100644
--- a/components/date-picker/date-range-popup.component.ts
+++ b/components/date-picker/date-range-popup.component.ts
@@ -56,7 +56,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
   template: `
     <ng-container *ngIf="isRange; else singlePanel">
       <div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
-        <div class="{{ prefixCls }}-range-arrow" [style.left.px]="datePickerService?.arrowLeft"></div>
+        <div class="{{ prefixCls }}-range-arrow" [style]="arrowPosition"></div>
         <div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
           <div class="{{ prefixCls }}-panels">
             <ng-container *ngIf="hasTimePicker; else noTimePicker">
@@ -179,6 +179,12 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
     return this.showToday || this.hasTimePicker || !!this.extraFooter || !!this.ranges;
   }
 
+  get arrowPosition(): { left?: string; right?: string } {
+    return this.dir === 'rtl'
+      ? { right: `${this.datePickerService?.arrowLeft}px` }
+      : { left: `${this.datePickerService?.arrowLeft}px` };
+  }
+
   constructor(
     public datePickerService: DatePickerService,
     public cdr: ChangeDetectorRef,
diff --git a/components/date-picker/range-picker.component.spec.ts b/components/date-picker/range-picker.component.spec.ts
index 18f8498a1d..b41c9bb7b9 100644
--- a/components/date-picker/range-picker.component.spec.ts
+++ b/components/date-picker/range-picker.component.spec.ts
@@ -410,6 +410,30 @@ describe('NzRangePickerComponent', () => {
       const result = (nzOnChange.calls.allArgs()[0] as Date[][])[0];
       expect((result[0] as Date).getDate()).toBe(+leftText);
     }));
+
+    it('should support correct position for top arrow', fakeAsync(() => {
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const arrow = queryFromOverlay(`.${PREFIX_CLASS}-range-arrow`) as HTMLElement;
+
+      expect(arrow.style.left).not.toBe('');
+    }));
+
+    it('should support dir rtl for top arrow', fakeAsync(() => {
+      fixture.debugElement.nativeElement.parentElement.setAttribute('dir', 'rtl');
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const arrow = queryFromOverlay(`.${PREFIX_CLASS}-range-arrow`) as HTMLElement;
+
+      expect(arrow.style.right).not.toBe('');
+      fixture.debugElement.nativeElement.parentElement.setAttribute('dir', '');
+    }));
   }); // /general api testing
 
   describe('panel switch and move forward/afterward', () => {
diff --git a/components/date-picker/style/patch.less b/components/date-picker/style/patch.less
index 4de5d8e3ac..e60750e6a3 100644
--- a/components/date-picker/style/patch.less
+++ b/components/date-picker/style/patch.less
@@ -26,3 +26,8 @@
     width: inherit;
   }
 }
+
+// make arrow in the right position in right direction
+.@{picker-prefix-cls}-range-arrow {
+  margin-right: @input-padding-horizontal-base * 1.5;
+}
\ No newline at end of file