fix(DatePicker): fixed nulling of value (#3736)

closes #3733, #3545

src/components/DatePicker/helpers.ts

@@ -2,12 +2,12 @@ import { format, isValid, parse, startOfToday } from 'date-fns';
 import { useCallback, useEffect } from 'react';
 import { useIMask } from 'react-imask';
 
+import { getForm } from '##/components/FieldGroup';
+import { TextFieldPropForm } from '##/components/TextField';
 import { useMutableRef } from '##/hooks/useMutableRef';
+import { range } from '##/utils/array';
+import { DateRange } from '##/utils/types/Date';
 
-import { range } from '../../utils/array';
-import { DateRange } from '../../utils/types/Date';
-import { getForm } from '../FieldGroup/FieldGroup';
-import { TextFieldPropForm } from '../TextField/TextField';
 import { DatePickerPropType } from './types';
 
 export const datePickerPropSeparatorDefault = '.';
@@ -164,15 +164,24 @@ export const useStringValue = (
   onChangeRef: React.MutableRefObject<
     DatePickerFieldTypeDatePropOnChange | undefined
   >,
-  imaskProps: ReturnType<typeof useIMask>,
+  imaskProps: ReturnType<typeof useIMask<HTMLInputElement>>,
 ) => {
   const stringValue = imaskProps.value;
 
   const refs = useMutableRef([imaskProps.setValue, value] as const);
 
+  const setStringValueToNull = useCallback(() => {
+    if (imaskProps.ref?.current && imaskProps.maskRef.current) {
+      refs.current[0]('');
+      imaskProps.ref.current.value = '';
+      imaskProps.maskRef.current.updateValue();
+    }
+  }, []);
+
   const handleClear: React.MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
-      refs.current[0]('');
+      setStringValueToNull();
+
       if (refs.current[1]) {
         onChangeRef.current?.(null, { e: e as unknown as Event });
       }
@@ -202,7 +211,7 @@ export const useStringValue = (
           : undefined;
 
       if (isValid(date)) {
-        refs.current[0]('');
+        setStringValueToNull();
       }
     }
   }, [value?.getTime()]);