fix: interacting with footer components closes the date selection panel

Author: dujiaqi

src/Picker.tsx

@@ -196,6 +196,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     autoComplete = 'off',
     inputRender,
     changeOnBlur,
+    renderExtraFooter,
   } = props as MergedPickerProps<DateType>;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -326,6 +327,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const [inputProps, { focused, typing }] = usePickerInput({
     blurToCancel: needConfirmButton,
     changeOnBlur,
+    hasExtraFooter: !!renderExtraFooter,
     open: mergedOpen,
     value: text,
     triggerOpen,

src/RangePicker.tsx

@@ -599,6 +599,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
     blurToCancel: !changeOnBlur && needConfirmButton,
     changeOnBlur,
+    hasExtraFooter: !!renderExtraFooter,
     forwardKeyDown,
     onBlur: onInternalBlur,
     isClickOutside: (target: EventTarget | null) => {

src/hooks/usePickerInput.ts

@@ -13,6 +13,7 @@ export default function usePickerInput({
   onKeyDown,
   blurToCancel,
   changeOnBlur,
+  hasExtraFooter,
   onSubmit,
   onCancel,
   onFocus,
@@ -25,14 +26,16 @@ export default function usePickerInput({
   forwardKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => boolean;
   onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void;
   blurToCancel?: boolean;
-  changeOnBlur?: boolean
+  changeOnBlur?: boolean;
+  hasExtraFooter?: boolean;
   onSubmit: () => void | boolean;
   onCancel: () => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }): [React.DOMAttributes<HTMLInputElement>, { focused: boolean; typing: boolean }] {
   const [typing, setTyping] = useState(false);
   const [focused, setFocused] = useState(false);
+  const [outside, setOutside] = useState(true);
 
   /**
    * We will prevent blur to handle open event when user click outside,
@@ -108,7 +111,7 @@ export default function usePickerInput({
     },
 
     onBlur: (e) => {
-      if (preventBlurRef.current || !isClickOutside(document.activeElement)) {
+      if (preventBlurRef.current || !isClickOutside(document.activeElement) || !outside) {
         preventBlurRef.current = false;
         return;
       }
@@ -152,6 +155,11 @@ export default function usePickerInput({
       const target = getTargetFromEvent(e);
       const clickedOutside = isClickOutside(target);
 
+      if (hasExtraFooter) {
+        // Save whether the last click is inside the component when `extraFooter` exists.
+        setOutside(clickedOutside);
+      }
+
       if (open) {
         if (!clickedOutside) {
           preventBlurRef.current = true;