From 7096f9b59d829342906184e8f249262f385c1753 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 15 Jul 2022 11:46:40 +0800
Subject: [PATCH 1/2] fix: panel lick

---
 docs/examples/range.tsx |  2 +-
 src/RangePicker.tsx     | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
index 35dccec54..7c00e8d34 100644
--- a/docs/examples/range.tsx
+++ b/docs/examples/range.tsx
@@ -69,7 +69,7 @@ export default () => {
             allowClear
             ref={rangePickerRef}
             showTime
-            style={{ width: 700 }}
+            style={{ width: 580 }}
             ranges={{
               ranges: [moment(), moment().add(10, 'day')],
             }}
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index d4adfb95a..8c1349f73 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -894,16 +894,19 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     arrowLeft = startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;
 
     // If panelWidth - arrowWidth - arrowMarginLeft < arrowLeft, panel should move to right side.
-    // If offsetLeft > arrowLeft, arrow position is absolutely right, because arrowLeft is not calculated with arrow margin.
+    // If arrowOffsetLeft > arrowLeft, arrowMarginLeft = arrowOffsetLeft - arrowLeft
+    const arrowMarginLeft =
+      arrowRef.current.offsetLeft > arrowLeft
+        ? arrowRef.current.offsetLeft - arrowLeft
+        : arrowRef.current.offsetLeft;
+
     if (
       panelDivRef.current.offsetWidth &&
       arrowRef.current.offsetWidth &&
       arrowLeft >
         panelDivRef.current.offsetWidth -
           arrowRef.current.offsetWidth -
-          (direction === 'rtl' || arrowRef.current.offsetLeft > arrowLeft
-            ? 0
-            : arrowRef.current.offsetLeft)
+          (direction === 'rtl' ? 0 : arrowMarginLeft)
     ) {
       panelLeft = arrowLeft;
     }

From 8f34fb2702b300a7e55a23c8e5f10add66241316 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 15 Jul 2022 12:01:31 +0800
Subject: [PATCH 2/2] test: add test case

---
 tests/range.spec.tsx | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index 70c597e50..2bca8ec8f 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1596,7 +1596,7 @@ describe('Picker.Range', () => {
     mock.mockRestore();
   });
 
-  it('panel should be stable: right', () => {
+  it('panel should be stable: arrow right and panel left', () => {
     const mock = spyElementPrototypes(HTMLElement, {
       offsetWidth: {
         get() {
@@ -1631,4 +1631,40 @@ describe('Picker.Range', () => {
     expect(wrapper.find('.rc-picker-panel-container').getDOMNode().style.marginLeft).toBe('0px');
     mock.mockRestore();
   });
+
+  it('panel should be stable: arrow right and panel right', () => {
+    const mock = spyElementPrototypes(HTMLElement, {
+      offsetWidth: {
+        get() {
+          if (this.className.includes('range-arrow')) {
+            return 14;
+          } else if (this.className.includes('panel-container')) {
+            return 311;
+          } else if (this.className.includes('input')) {
+            return 285;
+          } else if (this.className.includes('range-separator')) {
+            return 10;
+          }
+        },
+      },
+      offsetLeft: {
+        get() {
+          if (this.className.includes('range-arrow')) {
+            return 305;
+          }
+        },
+      },
+    });
+    const wrapper = mount(
+      <MomentRangePicker
+        allowClear
+        defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
+        clearIcon={<span>X</span>}
+        suffixIcon={<span>O</span>}
+      />,
+    );
+    wrapper.openPicker(1);
+    expect(wrapper.find('.rc-picker-panel-container').getDOMNode().style.marginLeft).toBe('295px');
+    mock.mockRestore();
+  });
 });