From 13ccfb393e38e34e15c19aa3896212c60b94047c Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Thu, 7 Nov 2024 19:47:40 +0700
Subject: [PATCH] fix(DateInput): use zero values with keyboard input (#7872)

* fix(DateInput): use zero values with keyboard input

* fix: use date-fns functions
---
 .../components/DateInput/DateInput.test.tsx   | 21 +++++++++++++++++--
 .../src/components/DateInput/DateInput.tsx    |  6 +++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/vkui/src/components/DateInput/DateInput.test.tsx b/packages/vkui/src/components/DateInput/DateInput.test.tsx
index a77be4e24e..d469e0a1c0 100644
--- a/packages/vkui/src/components/DateInput/DateInput.test.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.test.tsx
@@ -4,7 +4,7 @@ import { DateInput } from './DateInput';
 import styles from './DateInput.module.css';
 import inputLikeStyles from '../InputLike/InputLike.module.css';
 
-const date = new Date(2024, 6, 31, 11, 20);
+const date = new Date(2024, 6, 31, 11, 20, 0, 0);
 
 const getInputsLike = (container: HTMLElement) => {
   const dateInput = container.getElementsByClassName(styles['DateInput__input'])[0];
@@ -90,7 +90,24 @@ describe('DateInput', () => {
     const normalizedDate = convertInputsToNumbers(inputLikes);
     expect(normalizedDate).toEqual([30, 6, 2023, 15, 40]);
 
-    expect(onChange).toBeCalledTimes(5);
+    expect(onChange).toHaveBeenCalledTimes(5);
+    expect(onChange).toHaveBeenCalledWith(new Date(2023, 5, 30, 15, 40, 0, 0));
+  });
+
+  it('should call onChange with zero sec/ms', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const { container } = render(<DateInput value={undefined} onChange={onChange} />);
+    const inputLikes = getInputsLike(container);
+
+    const [dates, months, years] = inputLikes;
+
+    await userEvent.type(dates, '30');
+    await userEvent.type(months, '06');
+    await userEvent.type(years, '2023');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(new Date(2023, 5, 30, 0, 0, 0, 0));
   });
 
   it('should call onChange callback when change data by calendar', async () => {
diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
index 85b23db213..d220a4b822 100644
--- a/packages/vkui/src/components/DateInput/DateInput.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { startOfDay, startOfMinute } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
@@ -175,7 +176,10 @@ export const DateInput = ({
       }
 
       if (isMatch(formattedValue, mask)) {
-        onChange?.(parse(formattedValue, mask, value ?? new Date()));
+        const now = new Date();
+        onChange?.(
+          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),
+        );
       }
     },
     [enableTime, maxElement, onChange, value],