fix: solve animation jitter when input area less width than picker panel issue

Author: kiner-tang

docs/examples/range.tsx

@@ -50,11 +50,12 @@ export default () => {
     <div>
       <h2>Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}</h2>
 
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
           <RangePicker<Moment>
             {...sharedProps}
+            style={{width: '100%'}}
             value={undefined}
             locale={zhCN}
             allowClear

src/RangePicker.tsx

@@ -892,11 +892,16 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     const panelWidth = panelDivRef.current.offsetWidth;
     const arrowWidth = arrowRef.current.offsetWidth;
 
+    const inputAreaWidth = startInputDivRef.current.offsetWidth * 2 + separatorRef.current.offsetWidth;
+
     if (
       panelWidth &&
       arrowWidth &&
-      arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft)
+      arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft) && 
+      // If input size is too small that panel cannot move to right, let it keep left.
+      inputAreaWidth >= 2 * panelWidth
     ) {
+      
       panelLeft = arrowLeft;
     }
   }

tests/range.spec.tsx

@@ -1807,7 +1807,7 @@ describe('Picker.Range', () => {
           } else if (this.className.includes('panel-container')) {
             return 311;
           } else if (this.className.includes('input')) {
-            return 285;
+            return 400;
           } else if (this.className.includes('range-separator')) {
             return 10;
           }
@@ -1830,8 +1830,9 @@ describe('Picker.Range', () => {
       />,
     );
     openPicker(container, 1);
+    console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style"))
     expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({
-      marginLeft: '295px',
+      marginLeft: '410px',
     });
     mock.mockRestore();
   });
@@ -1927,4 +1928,43 @@ describe('Picker.Range', () => {
     fireEvent.click(document.querySelector('.rc-picker-cell'));
     expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active');
   });
+
+  it('If input size is too small that panel cannot move to right, let it keep left', () => {
+    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 100;
+          } else if (this.className.includes('range-separator')) {
+            return 10;
+          }
+        },
+      },
+      offsetLeft: {
+        get() {
+          if (this.className.includes('range-arrow')) {
+            return 305;
+          }
+        },
+      },
+    });
+    const { container } = render(
+      <MomentRangePicker
+        allowClear
+        defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
+        clearIcon={<span>X</span>}
+        suffixIcon={<span>O</span>}
+      />,
+    );
+    openPicker(container, 1);
+    console.log(document.querySelector('.rc-picker-panel-container').getAttribute("style"))
+    expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({
+      marginLeft: '0px',
+    });
+    mock.mockRestore();
+  });
 });