fix: Picker should open when click inside (#490)

* fix: Picker should open when click inside * fix: add picker test * Update src/Picker.tsx Co-authored-by: afc163 <[email protected]> Co-authored-by: 王美建 <> Co-authored-by: afc163 <[email protected]>
jinshuju · Oct 26, 2022 · 2d43933 · 2d43933
1 parent 0b843c9
commit 2d43933
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -284,10 +284,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }
   };
 
-  const onInternalMouseUp: React.MouseEventHandler<HTMLDivElement> = (...args) => {
-    if (onMouseUp) {
-      onMouseUp(...args);
-    }
+  const onInternalClick: React.MouseEventHandler<HTMLDivElement> = (...args) => {
+    onClick?.(...args);
 
     if (inputRef.current) {
       inputRef.current.focus();
@@ -536,11 +534,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
           })}
           style={style}
           onMouseDown={onMouseDown}
-          onMouseUp={onInternalMouseUp}
+          onMouseUp={onMouseUp}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
           onContextMenu={onContextMenu}
-          onClick={onClick}
+          onClick={onInternalClick}
         >
           <div
             className={classNames(`${prefixCls}-input`, {

diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
@@ -617,28 +617,38 @@ describe('Picker.Basic', () => {
     expect(wrapper.find('input').prop('value')).toEqual('2020-1st');
   });
 
-  it('click outside should also focus', () => {
-    const onMouseUp = jest.fn();
-    const wrapper = mount(<MomentPicker onMouseUp={onMouseUp} />);
+  it('Picker should open when click inside', () => {
+    const onClick = jest.fn();
+    const wrapper = mount(<MomentPicker onClick={onClick} />);
     const inputElement = wrapper.find('input').instance() as any as HTMLInputElement;
     inputElement.focus = jest.fn();
 
-    wrapper.find('.rc-picker').simulate('mouseUp');
+    wrapper.find('.rc-picker').simulate('click');
     expect(inputElement.focus).toHaveBeenCalled();
     expect(wrapper.isOpen()).toBeTruthy();
 
-    expect(onMouseUp).toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalled();
   });
 
   it('not open when disabled', () => {
     const wrapper = mount(<MomentPicker disabled />);
-    wrapper.find('.rc-picker').simulate('mouseUp');
+    wrapper.find('.rc-picker').simulate('click');
     expect(wrapper.isOpen()).toBeFalsy();
 
     wrapper.setProps({ disabled: false });
     expect(wrapper.isOpen()).toBeFalsy();
   });
 
+  it('not open when mouseup', () => {
+    const wrapper = mount(<MomentPicker />);
+    const inputElement = wrapper.find('input').instance() as any as HTMLInputElement;
+    inputElement.focus = jest.fn();
+
+    wrapper.find('.rc-picker').simulate('mouseup');
+    expect(inputElement.focus).toHaveBeenCalledTimes(0);
+    expect(wrapper.isOpen()).toBeFalsy();
+  });
+
   it('defaultOpenValue in timePicker', () => {
     resetWarned();
     const onChange = jest.fn();