fixed datePicker will reopen when click non input area (#269)

Author: Akashdeep98

src/RangePicker.tsx

@@ -137,15 +137,18 @@ type RangeShowTimeObject<DateType> = Omit<SharedTimeProps<DateType>, 'defaultVal
   defaultValue?: DateType[];
 };
 
-export type RangePickerBaseProps<DateType> = {} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerBaseProps<DateType>>;
+export type RangePickerBaseProps<DateType> = {} & RangePickerSharedProps<DateType> &
+  OmitPickerProps<PickerBaseProps<DateType>>;
 
 export type RangePickerDateProps<DateType> = {
   showTime?: boolean | RangeShowTimeObject<DateType>;
-} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerDateProps<DateType>>;
+} & RangePickerSharedProps<DateType> &
+  OmitPickerProps<PickerDateProps<DateType>>;
 
 export type RangePickerTimeProps<DateType> = {
   order?: boolean;
-} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerTimeProps<DateType>>;
+} & RangePickerSharedProps<DateType> &
+  OmitPickerProps<PickerTimeProps<DateType>>;
 
 export type RangePickerProps<DateType> =
   | RangePickerBaseProps<DateType>
@@ -239,9 +242,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   });
 
   // Operation ref
-  const operationRef: React.MutableRefObject<ContextOperationRefProps | null> = useRef<
-    ContextOperationRefProps
-  >(null);
+  const operationRef: React.MutableRefObject<ContextOperationRefProps | null> =
+    useRef<ContextOperationRefProps>(null);
 
   const mergedDisabled = React.useMemo<[boolean, boolean]>(() => {
     if (Array.isArray(disabled)) {
@@ -255,7 +257,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const [mergedValue, setInnerValue] = useMergedState<RangeValue<DateType>>(null, {
     value,
     defaultValue,
-    postState: values =>
+    postState: (values) =>
       picker === 'time' && !order ? values : reorderValues(values, generateConfig),
   });
 
@@ -270,7 +272,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   // ========================= Select Values =========================
   const [selectedValue, setSelectedValue] = useMergedState(mergedValue, {
-    postState: values => {
+    postState: (values) => {
       let postValues = values;
 
       if (mergedDisabled[0] && mergedDisabled[1]) {
@@ -322,8 +324,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const [mergedOpen, triggerInnerOpen] = useMergedState(false, {
     value: open,
     defaultValue: defaultOpen,
-    postState: postOpen => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen),
-    onChange: newOpen => {
+    postState: (postOpen) => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen),
+    onChange: (newOpen) => {
       if (onOpenChange) {
         onOpenChange(newOpen);
       }
@@ -533,12 +535,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   const [startText, triggerStartTextChange, resetStartText] = useTextValueMapping({
     valueTexts: startValueTexts,
-    onTextChange: newText => onTextChange(newText, 0),
+    onTextChange: (newText) => onTextChange(newText, 0),
   });
 
   const [endText, triggerEndTextChange, resetEndText] = useTextValueMapping({
     valueTexts: endValueTexts,
-    onTextChange: newText => onTextChange(newText, 1),
+    onTextChange: (newText) => onTextChange(newText, 1),
   });
 
   const [rangeHoverValue, setRangeHoverValue] = useState<RangeValue<DateType>>(null);
@@ -583,7 +585,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     onBlur,
     isClickOutside: (target: EventTarget | null) =>
       !elementsContains(
-        [panelDivRef.current, startInputDivRef.current, endInputDivRef.current],
+        [
+          panelDivRef.current,
+          startInputDivRef.current,
+          endInputDivRef.current,
+          containerRef.current,
+        ],
         target as HTMLElement,
       ),
     onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
@@ -731,7 +738,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   // ============================ Ranges =============================
   const rangeLabels = Object.keys(ranges || {});
 
-  const rangeList = rangeLabels.map(label => {
+  const rangeList = rangeLabels.map((label) => {
     const range = ranges![label];
     const newValues = typeof range === 'function' ? range() : range;
 
@@ -766,10 +773,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       panelHoverRangedValue = hoverRangedValue;
     }
 
-    let panelShowTime:
-      | boolean
-      | SharedTimeProps<DateType>
-      | undefined = showTime as SharedTimeProps<DateType>;
+    let panelShowTime: boolean | SharedTimeProps<DateType> | undefined =
+      showTime as SharedTimeProps<DateType>;
     if (showTime && typeof showTime === 'object' && showTime.defaultValue) {
       const timeDefaultValues: DateType[] = showTime.defaultValue!;
       panelShowTime = {
@@ -805,7 +810,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           style={undefined}
           direction={direction}
           disabledDate={mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate}
-          disabledTime={date => {
+          disabledTime={(date) => {
             if (disabledTime) {
               return disabledTime(date, mergedActivePickerIndex === 0 ? 'start' : 'end');
             }
@@ -903,13 +908,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       const showDoublePanel = currentMode === picker;
       const leftPanel = renderPanel(showDoublePanel ? 'left' : false, {
         pickerValue: viewDate,
-        onPickerValueChange: newViewDate => {
+        onPickerValueChange: (newViewDate) => {
           setViewDate(newViewDate, mergedActivePickerIndex);
         },
       });
       const rightPanel = renderPanel('right', {
         pickerValue: nextViewDate,
-        onPickerValueChange: newViewDate => {
+        onPickerValueChange: (newViewDate) => {
           setViewDate(
             getClosingViewDate(newViewDate, picker, generateConfig, -1),
             mergedActivePickerIndex,
@@ -957,7 +962,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         className={`${prefixCls}-panel-container`}
         style={{ marginLeft: panelLeft }}
         ref={panelDivRef}
-        onMouseDown={e => {
+        onMouseDown={(e) => {
           e.preventDefault();
         }}
       >
@@ -991,11 +996,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   ) {
     clearNode = (
       <span
-        onMouseDown={e => {
+        onMouseDown={(e) => {
           e.preventDefault();
           e.stopPropagation();
         }}
-        onMouseUp={e => {
+        onMouseUp={(e) => {
           e.preventDefault();
           e.stopPropagation();
           let values = mergedValue;
@@ -1101,7 +1106,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               disabled={mergedDisabled[0]}
               readOnly={inputReadOnly || typeof formatList[0] === 'function' || !startTyping}
               value={startHoverValue || startText}
-              onChange={e => {
+              onChange={(e) => {
                 triggerStartTextChange(e.target.value);
               }}
               autoFocus={autoFocus}
@@ -1126,7 +1131,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               disabled={mergedDisabled[1]}
               readOnly={inputReadOnly || typeof formatList[0] === 'function' || !endTyping}
               value={endHoverValue || endText}
-              onChange={e => {
+              onChange={(e) => {
                 triggerEndTextChange(e.target.value);
               }}
               placeholder={getValue(placeholder, 1) || ''}