From 2167ec9d391eb2af31ab1b1b6ed3130efc7dbb7f Mon Sep 17 00:00:00 2001
From: JX-Zhuang <who.zhuang@gmail.com>
Date: Fri, 14 Jan 2022 11:49:49 +0800
Subject: [PATCH] Fix:Range onClick event not working

---
 src/RangePicker.tsx  | 17 +++++++++++++++--
 tests/range.spec.tsx | 15 +++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index 49f898ff8..b32bd7099 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -103,8 +103,11 @@ export type RangePickerSharedProps<DateType> = {
   onPanelChange?: (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   onOk?: (dates: RangeValue<DateType>) => void;
   direction?: 'ltr' | 'rtl';
   autoComplete?: string;
@@ -210,8 +213,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     onCalendarChange,
     onFocus,
     onBlur,
+    onMouseDown,
+    onMouseUp,
     onMouseEnter,
     onMouseLeave,
+    onClick,
     onOk,
     onKeyDown,
     components,
@@ -647,9 +653,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   });
 
   // ========================== Click Picker ==========================
-  const onPickerClick = (e: MouseEvent) => {
+  const onPickerClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // When click inside the picker & outside the picker's input elements
     // the panel should still be opened
+    if (onClick) {
+      onClick(e);
+    }
     if (
       !mergedOpen &&
       !startInputRef.current.contains(e.target as Node) &&
@@ -663,8 +672,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
   };
 
-  const onPickerMouseDown = (e: MouseEvent) => {
+  const onPickerMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     // shouldn't affect input elements if picker is active
+    if (onMouseDown) {
+      onMouseDown(e);
+    }
     if (
       mergedOpen &&
       (startFocused || endFocused) &&
@@ -1107,6 +1119,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onMouseDown={onPickerMouseDown}
+          onMouseUp={onMouseUp}
           {...getDataOrAriaProps(props)}
         >
           <div
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index af724a54e..19cbe6903 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -1521,4 +1521,19 @@ describe('Picker.Range', () => {
     wrapper.keyDown(KeyCode.ENTER);
     expect(onCalendarChange).not.toHaveBeenCalled();
   });
+
+  // https://github.com/ant-design/ant-design/issues/33662
+  it('range picker should have onClick event', () => {
+    const handleClick = jest.fn();
+    const wrapper = mount(<MomentRangePicker onClick={handleClick} />);
+    wrapper.simulate('click');
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('range picker should have onMouseDown event', () => {
+    const handleMouseDown = jest.fn();
+    const wrapper = mount(<MomentRangePicker onMouseDown={handleMouseDown} />);
+    wrapper.simulate('mousedown');
+    expect(handleMouseDown).toHaveBeenCalled();
+  });
 });