fix(date-picker): merge origin input and popup input focus

ant-design · Mar 15, 2019 · 4518416 · 4518416
1 parent df47224
commit 4518416
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx
@@ -21,6 +21,7 @@ export interface PickerProps {
 
 export interface PickerState {
   open: boolean;
+  hadFocus: boolean;
   value: moment.Moment | null;
   showDate: moment.Moment | null;
 }
@@ -68,6 +69,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
         value,
         showDate: value,
         open: false,
+        hadFocus: false,
       };
     }
 
@@ -117,6 +119,22 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
       }
     };
 
+    onFocus = () => {
+      const { open, hadFocus } = this.state;
+      if (!open && !hadFocus) {
+        this.setState({ hadFocus: true });
+        this.props.onFocus()
+      }
+    };
+
+    onBlur = () => {
+      const { open, hadFocus } = this.state;
+      if (!open && hadFocus) {
+        this.setState({ hadFocus: false });
+        this.props.onBlur()
+      }
+    };
+
     focus() {
       this.input.focus();
     }
@@ -245,8 +263,8 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
           id={props.id}
           className={classNames(props.className, props.pickerClass)}
           style={{ ...pickerStyle, ...props.style }}
-          onFocus={props.onFocus}
-          onBlur={props.onBlur}
+          onFocus={this.onFocus}
+          onBlur={this.onBlur}
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
         >

diff --git a/tests/shared/focusTest.js b/tests/shared/focusTest.js
@@ -29,6 +29,14 @@ export default function focusTest(Component) {
       expect(handleFocus).toBeCalled();
     });
 
+    it('focus() and onFocus trigger only once', () => {
+      const handleFocus = jest.fn();
+      const wrapper = mount(<Component onFocus={handleFocus} />, { attachTo: container });
+      wrapper.instance().focus();
+      jest.runAllTimers();
+      expect(handleFocus).toBeCalledTimes(1);
+    });
+
     it('blur() and onBlur', () => {
       const handleBlur = jest.fn();
       const wrapper = mount(<Component onBlur={handleBlur} />, { attachTo: container });
@@ -39,6 +47,16 @@ export default function focusTest(Component) {
       expect(handleBlur).toBeCalled();
     });
 
+    it('blur() and onBlur only trigger once', () => {
+      const handleBlur = jest.fn();
+      const wrapper = mount(<Component onBlur={handleBlur} />, { attachTo: container });
+      wrapper.instance().focus();
+      jest.runAllTimers();
+      wrapper.instance().blur();
+      jest.runAllTimers();
+      expect(handleBlur).toBeCalledTimes(1);
+    });
+
     it('autoFocus', () => {
       const handleFocus = jest.fn();
       mount(<Component autoFocus onFocus={handleFocus} />, { attachTo: container });