Fix sync text logic

Author: zombieJ

src/Picker.tsx

@@ -213,9 +213,12 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }
   };
 
-  const triggerOpen = (newOpen: boolean) => {
+  const triggerOpen = (
+    newOpen: boolean,
+    preventChangeEvent: boolean = false,
+  ) => {
     triggerInnerOpen(newOpen);
-    if (!newOpen) {
+    if (!newOpen && !preventChangeEvent) {
       triggerChange(selectedValue);
     }
   };
@@ -235,7 +238,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     locale,
   });
 
-  const [text, triggerTextChange] = useTextValueMapping({
+  const [text, triggerTextChange, resetText] = useTextValueMapping({
     valueTexts,
     onTextChange: newText => {
       const inputDate = generateConfig.locale.parse(
@@ -264,10 +267,13 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
       ),
     onSubmit: () => {
       triggerChange(selectedValue);
+      triggerOpen(false, true);
+      resetText();
     },
     onCancel: () => {
-      triggerChange(mergedValue);
+      triggerOpen(false, true);
       setSelectedValue(mergedValue);
+      resetText();
     },
     onFocus,
     onBlur,

src/RangePicker.tsx

@@ -252,7 +252,6 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       (!isEqual(generateConfig, getIndexValue(mergedValue, 0), startValue) ||
         !isEqual(generateConfig, getIndexValue(mergedValue, 1), endValue))
     ) {
-      console.warn('trigger change!!!!');
       onChange(values, [
         startValue
           ? generateConfig.locale.format(
@@ -268,13 +267,19 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
   };
 
-  const triggerOpen = (newOpen: boolean, index: 0 | 1) => {
+  const triggerOpen = (
+    newOpen: boolean,
+    index: 0 | 1,
+    preventChangeEvent: boolean = false,
+  ) => {
     if (newOpen) {
       setActivePickerIndex(index);
       triggerInnerOpen(newOpen);
     } else if (activePickerIndex === index) {
       triggerInnerOpen(newOpen);
-      triggerChange(selectedValue);
+      if (!preventChangeEvent) {
+        triggerChange(selectedValue);
+      }
     }
   };
 
@@ -314,26 +319,25 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
   };
 
-  const [startText, triggerStartTextChange] = useTextValueMapping<DateType>({
+  const [
+    startText,
+    triggerStartTextChange,
+    resetStartText,
+  ] = useTextValueMapping<DateType>({
     valueTexts: startValueTexts,
     onTextChange: newText => onTextChange(newText, 0),
   });
 
-  const [endText, triggerEndTextChange] = useTextValueMapping<DateType>({
+  const [endText, triggerEndTextChange, resetEndText] = useTextValueMapping<
+    DateType
+  >({
     valueTexts: endValueTexts,
     onTextChange: newText => onTextChange(newText, 1),
   });
 
   // ============================= Input =============================
   const sharedInputHookProps = {
     forwardKeyDown,
-    onSubmit: () => {
-      triggerChange(selectedValue);
-    },
-    onCancel: () => {
-      triggerChange(mergedValue);
-      setSelectedValue(mergedValue);
-    },
     onBlur,
   };
 
@@ -362,6 +366,16 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       passOnFocus(e);
     },
     triggerOpen: newOpen => triggerOpen(newOpen, 0),
+    onSubmit: () => {
+      triggerChange(selectedValue);
+      triggerOpen(false, 0, true);
+      resetStartText();
+    },
+    onCancel: () => {
+      triggerOpen(false, 0, true);
+      setSelectedValue(mergedValue);
+      resetStartText();
+    },
   });
 
   const [
@@ -383,6 +397,16 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       passOnFocus(e);
     },
     triggerOpen: newOpen => triggerOpen(newOpen, 1),
+    onSubmit: () => {
+      triggerChange(selectedValue);
+      triggerOpen(false, 1, true);
+      resetEndText();
+    },
+    onCancel: () => {
+      triggerOpen(false, 1, true);
+      setSelectedValue(mergedValue);
+      resetEndText();
+    },
   });
 
   // ============================= Sync ==============================

src/hooks/usePickerInput.ts

@@ -45,7 +45,6 @@ export default function usePickerInput({
             triggerOpen(true);
           } else {
             onSubmit();
-            triggerOpen(false);
             setTyping(true);
           }
           return;
@@ -65,7 +64,6 @@ export default function usePickerInput({
         }
 
         case KeyCode.ESC: {
-          triggerOpen(false);
           setTyping(true);
           onCancel();
           return;

src/hooks/useTextValueMapping.ts

@@ -7,7 +7,7 @@ export default function useTextValueMapping<ValueType>({
   /** Must useMemo, to assume that `valueTexts` only match on the first change */
   valueTexts: string[];
   onTextChange: (text: string) => void;
-}): [string, React.ChangeEventHandler<HTMLInputElement>] {
+}): [string, React.ChangeEventHandler<HTMLInputElement>, () => void] {
   const [text, setInnerText] = React.useState('');
 
   function triggerTextChange({
@@ -17,11 +17,15 @@ export default function useTextValueMapping<ValueType>({
     onTextChange(value);
   }
 
+  function resetText() {
+    setInnerText(valueTexts[0]);
+  }
+
   React.useEffect(() => {
     if (valueTexts.every(valText => valText !== text)) {
-      setInnerText(valueTexts[0]);
+      resetText();
     }
   }, [valueTexts.join('||')]);
 
-  return [text, triggerTextChange];
+  return [text, triggerTextChange, resetText];
 }