fix picker value doesn't clear with backspace/delete

src/PickerInput/Selector/Input.tsx

@@ -37,6 +37,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   value?: string;
   onChange: (value: string) => void;
   onSubmit: VoidFunction;
+  onClear: VoidFunction;
   /** Meaning current is from the hover cell getting the placeholder text */
   helped?: boolean;
   /**
@@ -62,6 +63,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
     helped,
     onHelp,
     onSubmit,
+    onClear,
     onKeyDown,
     preserveInvalidOnBlur = false,
     invalid,
@@ -201,16 +203,28 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   // Check if blur need reset input value
   useLockEffect(active, () => {
     if (!active && !preserveInvalidOnBlur) {
-      setInputValue(value);
+      if (clearIcon && !inputValue) {
+        onClear();
+      } else {
+        setInputValue(value);  
+      }
     }
   });
 
   // ======================= Keyboard =======================
   const onSharedKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    if (event.key === 'Enter' && validateFormat(inputValue)) {
-      onSubmit();
+    const isEnterKeyTriggered = event.key === 'Enter';
+    if (isEnterKeyTriggered) {
+      if (validateFormat(inputValue)) {
+        onSubmit();
+      }
     }
 
+    if (isEnterKeyTriggered || event.key === 'Escape') {
+      if (clearIcon && !inputValue) {
+        onClear();
+      }
+    }
     onKeyDown?.(event);
   };
 

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -160,6 +160,7 @@ function SingleSelector<DateType extends object = any>(
   const showClear = !!(clearIcon && value.length && !disabled);
 
   // ======================= Multiple =======================
+  const clearIconNode = showClear && <ClearIcon icon={clearIcon} onClear={onClear} />;
   const selectorNode = multiple ? (
     <>
       <MultipleDates
@@ -180,15 +181,15 @@ function SingleSelector<DateType extends object = any>(
         autoFocus={autoFocus}
       />
       <Icon type="suffix" icon={suffixIcon} />
-      {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
+      {clearIconNode}
     </>
   ) : (
     <Input
       ref={inputRef}
       {...getInputProps()}
       autoFocus={autoFocus}
       suffixIcon={suffixIcon}
-      clearIcon={showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
+      clearIcon={clearIconNode}
       showActiveCls={false}
     />
   );

src/PickerInput/Selector/hooks/useInputProps.ts

@@ -17,6 +17,7 @@ export default function useInputProps<DateType extends object = any>(
     | 'required'
     | 'aria-required'
     | 'onSubmit'
+    | 'onClear'
     | 'onFocus'
     | 'onBlur'
     | 'onInputChange'
@@ -53,6 +54,7 @@ export default function useInputProps<DateType extends object = any>(
     required,
     'aria-required': ariaRequired,
     onSubmit,
+    onClear,
     onFocus,
     onBlur,
     onInputChange,
@@ -180,6 +182,7 @@ export default function useInputProps<DateType extends object = any>(
       },
 
       onSubmit,
+      onClear,
 
       // Get validate text value
       onChange: (text: string) => {

tests/picker.spec.tsx

@@ -1251,6 +1251,59 @@ describe('Picker.Basic', () => {
     });
   });
 
+  describe('empty input should submit when set allowClear true', () => {
+    ['ENTER', 'TAB', 'ESC'].forEach(item => {
+      it(`submit empty through the '${item}' key`, () => {
+        const onChange = jest.fn();
+        const { container } = render(
+          <DayPicker
+            value={getDay('2011-11-11')}
+            onChange={onChange}
+            allowClear={true}
+          />,
+        );
+        const inputEle = container.querySelector('input');
+
+        fireEvent.change(inputEle, {
+          target: { value: '' },
+        });
+        keyDown(KeyCode.ENTER);
+        expect(onChange).toHaveBeenCalledWith(null, '');
+      });
+    })
+
+    it('submit empty when input blur', async () => {
+      const onChange = jest.fn();
+      const onFocus = jest.fn();
+      const onBlur = jest.fn();
+      const { container } = render(
+        <DayPicker
+          value={getDay('2011-11-11')}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          allowClear={true}
+        />,
+      );
+      const inputEle = container.querySelector('input');
+      fireEvent.focus(inputEle);
+      fireEvent.change(inputEle, { target: { value: '' } });
+      fireEvent.blur(inputEle);
+      expect(onBlur).toHaveBeenCalled();
+      /**
+       * wait useLayoutEffect
+       * code: PickerInput/Selector/Input.tsx  
+       * useLockEffect(active, () => {
+       *  // ...
+       * })
+       * 
+       */
+      await waitFakeTimer();
+      expect(onChange).toHaveBeenCalledWith(null, '');
+    });
+
+  })
+
   it('pickerValue change', () => {
     const onPickerValueChange = jest.fn();
     const { container } = render(<DayPicker onPickerValueChange={onPickerValueChange} />);