fix: interacting with footer components closes the date selection panel

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;

tests/picker.spec.tsx

@@ -1145,4 +1145,19 @@ describe('Picker.Basic', () => {
 
     expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10');
   });
+
+  it('interacting with components within footer should not close the panel', () => {
+    const { container, baseElement } = render(
+      <MomentPicker renderExtraFooter={() => <button className="test-button">button</button>} />,
+    );
+
+    openPicker(container);
+
+    fireEvent.click(baseElement.querySelector('.test-button'));
+
+    // Simulate component behavior
+    fireEvent.blur(container.querySelector('input'));
+
+    expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
+  });
 });

tests/range.spec.tsx

@@ -1985,4 +1985,22 @@ describe('Picker.Range', () => {
 
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  // In line with the picker
+  it('interacting with components within footer should not close the panel', () => {
+    const { container, baseElement } = render(
+      <MomentRangePicker
+        renderExtraFooter={() => <button className="test-button">button</button>}
+      />,
+    );
+
+    openPicker(container);
+
+    fireEvent.click(baseElement.querySelector('.test-button'));
+
+    // Simulate component behavior
+    fireEvent.blur(container.querySelector('input'));
+
+    expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy();
+  });
 });