fix: calculate container position with arrow

react-component · Feb 7, 2022 · b4203cc · b4203cc
1 parent 234dd2a
commit b4203cc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
@@ -87,6 +87,14 @@ export default () => {
               test: [moment(), moment().add(1, 'hour')],
             }}
           />
+          <RangePicker<Moment>
+            {...sharedProps}
+            value={undefined}
+            locale={zhCN}
+            allowClear
+            picker="time"
+            style={{ width: 280 }}
+          />
         </div>
 
         <div style={{ margin: '0 8px' }}>

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -239,6 +239,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const separatorRef = useRef<HTMLDivElement>(null);
   const startInputRef = useRef<HTMLInputElement>(null);
   const endInputRef = useRef<HTMLInputElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
 
   // ============================ Warning ============================
   if (process.env.NODE_ENV !== 'production') {
@@ -892,7 +893,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     // Arrow offset
     arrowLeft = startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth;
 
-    if (panelDivRef.current.offsetWidth && arrowLeft > panelDivRef.current.offsetWidth) {
+    if (
+      panelDivRef.current.offsetWidth &&
+      arrowRef.current.offsetWidth &&
+      arrowLeft > panelDivRef.current.offsetWidth - arrowRef.current.offsetWidth
+    ) {
       panelLeft = arrowLeft;
     }
   }
@@ -1003,7 +1008,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
       style={{ minWidth: popupMinWidth }}
     >
-      <div className={`${prefixCls}-range-arrow`} style={arrowPositionStyle} />
+      <div ref={arrowRef} className={`${prefixCls}-range-arrow`} style={arrowPositionStyle} />
 
       {renderPanels()}
     </div>