chore: patch logic of submit

docs/examples/debug.tsx

@@ -40,12 +40,12 @@ export default () => {
       <RangePicker
         {...sharedLocale}
         suffixIcon="🧶"
-        onFocus={() => {
-          console.log('🍷 Focus!');
-        }}
-        onBlur={() => {
-          console.log('🍷 Blur!');
-        }}
+        // onFocus={() => {
+        //   console.log('🍷 Focus!');
+        // }}
+        // onBlur={() => {
+        //   console.log('🍷 Blur!');
+        // }}
         // changeOnBlur
         format={{
           format: 'YYYY-MM-DD',

src/NewPicker/PickerInput/RangePicker.tsx

@@ -71,8 +71,6 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
     onCalendarChange,
     changeOnBlur,
 
-    order = true,
-
     disabled,
     allowEmpty,
 
@@ -172,17 +170,13 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
   const mergedAllowEmpty = separateConfig(allowEmpty, true);
 
   // ======================== Value =========================
-  const [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange] = useRangeValue(
-    value,
-    defaultValue,
-    generateConfig,
-    locale,
-    formatList,
-    mergedAllowEmpty,
-    order,
-    onCalendarChange,
-    onChange,
-  );
+  const [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange, finishActive] =
+    useRangeValue({
+      ...props,
+      formatList,
+      allowEmpty: mergedAllowEmpty,
+      focused,
+    });
 
   // ===================== Picker Value =====================
   const [mergedStartPickerValue, setStartPickerValue] = useMergedState(
@@ -238,29 +232,30 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
     setFocused(false);
 
     // Always trigger submit since input is always means confirm
-    triggerChange(mergedValue, 'submit');
+    triggerChange(mergedValue);
 
     onBlur?.(event);
   };
 
   // ======================== Submit ========================
-  const submitAndFocusNext = (date?: DateType) => {
+  const triggerChangeAndFocusNext = (date?: DateType) => {
     let nextValue = mergedValue;
 
     if (date) {
       nextValue = fillMergedValue(date, activeIndex);
     }
 
-    triggerChange(nextValue, 'submit');
-
     // Focus or blur the open panel
     const activeLen = activeList?.length;
     if (activeLen === 1) {
+      triggerChange(nextValue);
+
       // Open to the next field
       selectorRef.current.focus(activeList[0] === 0 ? 1 : 0);
     } else if (activeLen > 1) {
       // Close anyway
       onSelectorOpenChange(false, activeIndex);
+      finishActive(nextValue);
     }
   };
 
@@ -288,15 +283,15 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
     clone[activeIndex] = date;
 
     if (mergedMode === picker && !needConfirm) {
-      submitAndFocusNext(date);
+      triggerChangeAndFocusNext(date);
     } else {
       triggerChange(clone);
     }
   };
 
   const onPopupClose = () => {
     if (changeOnBlur) {
-      triggerChange(mergedValue, 'submit');
+      triggerChange(mergedValue);
     }
 
     // Close popup
@@ -328,7 +323,7 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
       onPickerValueChange={setCurrentPickerValue}
       // Submit
       needConfirm={needConfirm}
-      onSubmit={submitAndFocusNext}
+      onSubmit={triggerChangeAndFocusNext}
     />
   );
 
@@ -370,7 +365,7 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
           activeIndex={focusedIndex}
           onFocus={onSelectorFocus}
           onBlur={onSelectorBlur}
-          onSubmit={submitAndFocusNext}
+          onSubmit={triggerChangeAndFocusNext}
           // Change
           value={mergedValue}
           format={formatList}

src/NewPicker/PickerInput/hooks/useRangeValue.ts

@@ -1,34 +1,52 @@
-import { useMergedState } from 'rc-util';
-import type { GenerateConfig } from '../../../generate';
+import { useEvent, useMergedState } from 'rc-util';
 import { isSameTimestamp } from '../../../utils/dateUtil';
-import type { Locale } from '../../interface';
 import type { RangePickerProps, RangeValueType } from '../RangePicker';
+import { useLockEffect } from './useLockState';
 
 // Submit Logic (with order):
-// * All the input is filled step by step
+// * Submit by next input
 // * None of the Picker has focused anymore
 
 type SetValue<DateType> = (val: RangeValueType<DateType>) => void;
 
 type TriggerChange<DateType> = ([start, end]: RangeValueType<DateType>, source?: 'submit') => void;
 
 export default function useRangeValue<DateType = any>(
-  value: RangeValueType<DateType>,
-  defaultValue: RangeValueType<DateType>,
-  generateConfig: GenerateConfig<DateType>,
-  locale: Locale,
-  formatList: string[],
-  allowEmpty: [boolean | undefined, boolean | undefined],
-  order: boolean,
-  onCalendarChange?: RangePickerProps<DateType>['onCalendarChange'],
-  onChange?: RangePickerProps<DateType>['onChange'],
+  info: Pick<
+    RangePickerProps<DateType>,
+    | 'value'
+    | 'defaultValue'
+    | 'generateConfig'
+    | 'locale'
+    | 'allowEmpty'
+    | 'order'
+    | 'onCalendarChange'
+    | 'onChange'
+  > & {
+    formatList: string[];
+    focused: boolean;
+  },
 ): [
   mergedValue: RangeValueType<DateType>,
   setMergedValue: SetValue<DateType>,
   submitValue: RangeValueType<DateType>,
   setSubmitValue: SetValue<DateType>,
   triggerChange: TriggerChange<DateType>,
+  finishActive: (value: RangeValueType<DateType>) => void,
 ] {
+  const {
+    value,
+    defaultValue,
+    generateConfig,
+    locale,
+    formatList,
+    allowEmpty,
+    order = true,
+    onCalendarChange,
+    onChange,
+    focused,
+  } = info;
+
   // ============================ Values ============================
   const valueConfig = {
     value,
@@ -60,14 +78,9 @@ export default function useRangeValue<DateType = any>(
     return [isSameStart && isSameEnd, isSameStart, isSameEnd];
   };
 
-  const triggerChange = ([start, end]: RangeValueType<DateType>, source?: 'submit') => {
+  const triggerChange = ([start, end]: RangeValueType<DateType>) => {
     const clone: RangeValueType<DateType> = [start, end];
 
-    // Only when exist value to sort
-    if (order && source === 'submit' && clone[0] && clone[1]) {
-      clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1));
-    }
-
     // Update merged value
     const [isSameMergedDates, isSameStart] = isSameDates(mergedValue, clone);
 
@@ -81,19 +94,31 @@ export default function useRangeValue<DateType = any>(
         });
       }
     }
+  };
+
+  // ============================ Effect ============================
+  const triggerSubmit = useEvent((nextValue?: RangeValueType<DateType>) => {
+    const clone: RangeValueType<DateType> = [...(nextValue || mergedValue)];
+
+    // Only when exist value to sort
+    if (order && clone[0] && clone[1]) {
+      clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1));
+    }
 
-    // Update `submitValue` to trigger event by effect
-    if (source === 'submit') {
-      setSubmitValue(clone);
+    // Sync `calendarValue`
+    triggerChange(clone);
 
-      // Trigger `onChange` if needed
+    // Sync state
+    setSubmitValue(clone);
+
+    // Trigger `onChange` if needed
+    if (onChange) {
       const [isSameSubmitDates] = isSameDates(submitValue, clone);
 
       const startEmpty = !clone[0];
       const endEmpty = !clone[1];
 
       if (
-        onChange &&
         !isSameSubmitDates &&
         // Validate start
         (!startEmpty || allowEmpty[0]) &&
@@ -103,8 +128,20 @@ export default function useRangeValue<DateType = any>(
         onChange(clone, getDateTexts(clone));
       }
     }
+  });
+
+  const finishActive = (nextValue: RangeValueType<DateType>) => {
+    console.log('finishActive');
+    triggerSubmit(nextValue);
   };
 
+  useLockEffect(focused, () => {
+    if (!focused) {
+      console.log('Effect!');
+      triggerSubmit();
+    }
+  });
+
   // ============================ Return ============================
-  return [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange];
+  return [mergedValue, setMergedValue, submitValue, setSubmitValue, triggerChange, finishActive];
 }