feat: support changeOnBlur (#629)

* add changeOnBlur

* support Picker changeOnBlur

* support RangePicker changeOnBlur

* chore: test of it

* chore: tmp refactor

* chore: adjust open logic

* test: update test case

* fix: range enter switch

* chore: on confirm to switch

* fix: close directly if no need next one

* fix: open record

* refactor: with firstTimeOpen

* fix: dbl click should not close

* test: fix test case

* test: fix test case

* test: fix test case

* docs: update back

* chore: clean up

* chore: clean up

Author: zombieJ

docs/examples/basic.tsx

@@ -47,7 +47,7 @@ export default () => {
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
-          <Picker<Moment> {...sharedProps} locale={zhCN} />
+          <Picker<Moment> {...sharedProps} locale={zhCN} suffixIcon="SUFFIX" />
           <Picker<Moment> {...sharedProps} locale={enUS} />
         </div>
         <div style={{ margin: '0 8px' }}>
@@ -79,6 +79,7 @@ export default () => {
               }
               return {};
             }}
+            changeOnBlur
           />
         </div>
         <div style={{ margin: '0 8px' }}>

docs/examples/range.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import type { Moment } from 'moment';
 import moment from 'moment';
-import RangePicker from '../../src/RangePicker';
+import React from 'react';
+import '../../assets/index.less';
 import momentGenerateConfig from '../../src/generate/moment';
 import zhCN from '../../src/locale/zh_CN';
-import '../../assets/index.less';
+import RangePicker from '../../src/RangePicker';
 import './common.less';
 
 const defaultStartValue = moment('2019-09-03 05:02:03');
@@ -70,13 +70,18 @@ export default () => {
             ref={rangePickerRef}
             showTime
             style={{ width: 580 }}
-            cellRender={(current, info) => <div title={info.type} style={{background: 'green'}}>{typeof current === "number" ? current : current.get("date")}</div>}
+            cellRender={(current, info) => (
+              <div title={info.type} style={{ background: 'green' }}>
+                {typeof current === 'number' ? current : current.get('date')}
+              </div>
+            )}
             ranges={{
               ranges: [moment(), moment().add(10, 'day')],
             }}
             onOk={(dates) => {
               console.log('OK!!!', dates);
             }}
+            changeOnBlur
           />
           <RangePicker<Moment>
             {...sharedProps}

package.json

@@ -40,7 +40,7 @@
     "@babel/runtime": "^7.10.1",
     "@rc-component/trigger": "^1.5.0",
     "classnames": "^2.2.1",
-    "rc-util": "^5.27.0"
+    "rc-util": "^5.30.0"
   },
   "engines": {
     "node": ">=8.x"

src/Picker.tsx

@@ -11,8 +11,8 @@
  * Tips: Should add faq about `datetime` mode with `defaultValue`
  */
 
-import classNames from 'classnames';
 import type { AlignType } from '@rc-component/trigger/lib/interface';
+import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import warning from 'rc-util/lib/warning';
 import * as React from 'react';
@@ -87,6 +87,12 @@ export type PickerSharedProps<DateType> = {
   onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void;
 
+  /**
+   * Trigger `onChange` event when blur.
+   * If you don't want to user click `confirm` to trigger change, can use this.
+   */
+  changeOnBlur?: boolean;
+
   // Internal
   /** @private Internal usage, do not use in production mode!!! */
   pickerRef?: React.MutableRefObject<PickerRefConfig>;
@@ -182,6 +188,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     direction,
     autoComplete = 'off',
     inputRender,
+    changeOnBlur,
   } = props as MergedPickerProps<DateType>;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -301,6 +308,14 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
 
   // ============================= Input =============================
+  const onInternalBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (changeOnBlur) {
+      triggerChange(selectedValue);
+    }
+
+    onBlur?.(e);
+  };
+
   const [inputProps, { focused, typing }] = usePickerInput({
     blurToCancel: needConfirmButton,
     open: mergedOpen,
@@ -336,7 +351,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
       onKeyDown?.(e, preventDefault);
     },
     onFocus,
-    onBlur,
+    onBlur: onInternalBlur,
+    changeOnBlur,
   });
 
   // ============================= Sync ==============================
@@ -450,7 +466,17 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   let suffixNode: React.ReactNode;
   if (suffixIcon) {
-    suffixNode = <span className={`${prefixCls}-suffix`}>{suffixIcon}</span>;
+    suffixNode = (
+      <span
+        className={`${prefixCls}-suffix`}
+        onMouseDown={(e) => {
+          // Not lost focus
+          e.preventDefault();
+        }}
+      >
+        {suffixIcon}
+      </span>
+    );
   }
 
   let clearNode: React.ReactNode;