fix: Blur should reset text input

Author: zombieJ

src/Picker.tsx

@@ -201,6 +201,27 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     },
   });
 
+  // ============================= Text ==============================
+  const valueTexts = useValueTexts(selectedValue, {
+    formatList,
+    generateConfig,
+    locale,
+  });
+
+  const [text, triggerTextChange, resetText] = useTextValueMapping({
+    valueTexts,
+    onTextChange: newText => {
+      const inputDate = generateConfig.locale.parse(
+        locale.locale,
+        newText,
+        formatList,
+      );
+      if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
+        setSelectedValue(inputDate);
+      }
+    },
+  });
+
   // ============================ Trigger ============================
   const triggerChange = (newValue: DateType | null) => {
     setSelectedValue(newValue);
@@ -243,27 +264,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     }
   };
 
-  // ============================= Text ==============================
-  const valueTexts = useValueTexts(selectedValue, {
-    formatList,
-    generateConfig,
-    locale,
-  });
-
-  const [text, triggerTextChange, resetText] = useTextValueMapping({
-    valueTexts,
-    onTextChange: newText => {
-      const inputDate = generateConfig.locale.parse(
-        locale.locale,
-        newText,
-        formatList,
-      );
-      if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
-        setSelectedValue(inputDate);
-      }
-    },
-  });
-
   // ============================= Input =============================
   const [inputProps, { focused, typing }] = usePickerInput({
     open: mergedOpen,
@@ -296,8 +296,12 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   React.useEffect(() => {
     if (!mergedOpen) {
       setSelectedValue(mergedValue);
+
+      if (!valueTexts.length || valueTexts[0] === '') {
+        triggerTextChange('');
+      }
     }
-  }, [mergedOpen]);
+  }, [mergedOpen, valueTexts]);
 
   // Sync innerValue with control mode
   React.useEffect(() => {
@@ -406,7 +410,9 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
               disabled={disabled}
               readOnly={inputReadOnly || !typing}
               value={text}
-              onChange={triggerTextChange}
+              onChange={e => {
+                triggerTextChange(e.target.value);
+              }}
               autoFocus={autoFocus}
               placeholder={placeholder}
               ref={inputRef}

src/RangePicker.tsx

@@ -616,8 +616,15 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   React.useEffect(() => {
     if (!mergedOpen) {
       setSelectedValue(mergedValue);
+
+      if (!startValueTexts.length || startValueTexts[0] === '') {
+        triggerStartTextChange('');
+      }
+      if (!endValueTexts.length || endValueTexts[0] === '') {
+        triggerEndTextChange('');
+      }
     }
-  }, [mergedOpen]);
+  }, [mergedOpen, startValueTexts, endValueTexts]);
 
   // Sync innerValue with control mode
   React.useEffect(() => {
@@ -978,7 +985,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               disabled={mergedDisabled[0]}
               readOnly={inputReadOnly || !startTyping}
               value={startText}
-              onChange={triggerStartTextChange}
+              onChange={e => {
+                triggerStartTextChange(e.target.value);
+              }}
               autoFocus={autoFocus}
               placeholder={getValue(placeholder, 0) || ''}
               ref={startInputRef}
@@ -999,7 +1008,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
               disabled={mergedDisabled[1]}
               readOnly={inputReadOnly || !endTyping}
               value={endText}
-              onChange={triggerEndTextChange}
+              onChange={e => {
+                triggerEndTextChange(e.target.value);
+              }}
               placeholder={getValue(placeholder, 1) || ''}
               ref={endInputRef}
               {...endInputProps}

src/hooks/useTextValueMapping.ts

@@ -7,12 +7,10 @@ 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>, () => void] {
+}): [string, (text: string) => void, () => void] {
   const [text, setInnerText] = React.useState('');
 
-  function triggerTextChange({
-    target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) {
+  function triggerTextChange(value: string) {
     setInnerText(value);
     onTextChange(value);
   }

tests/picker.spec.tsx

@@ -503,4 +503,16 @@ describe('Picker.Basic', () => {
 
     expect(wrapper.find('input').props().name).toEqual('bamboo');
   });
+
+  it('blur should reset invalidate text', () => {
+    const wrapper = mount(<MomentPicker />);
+    wrapper.openPicker();
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'Invalidate',
+      },
+    });
+    wrapper.closePicker();
+    expect(wrapper.find('input').props().value).toEqual('');
+  });
 });