Repository: Hacker0x01/react-datepicker (ts)

Issue:
DatePicker with "showTimeSelectOnly" is not possible clear the value
**Describe the bug**
When the datepicker is configured with property "showTimeSelectOnly" it's not possible to clear the value

**To Reproduce**
Steps to reproduce the behavior:

0. Go to the page 'https://reactdatepicker.com/' and find the "Select Time Only" example (https://reactdatepicker.com/#example-select-time-only)
1. Click on the datepicker
2. Clear the value in the input (backspace or delete on the keyboard)
3. Click outside
4. The previous value reappears in the input

**Expected behavior**
The datepicker should be cleared, withuout value

**Screenshots**
Step 1
![immagine](https://github.com/Hacker0x01/react-datepicker/assets/140262490/72e9c99c-6525-4a85-b261-84156792cb3e)
Step 2
![immagine](https://github.com/Hacker0x01/react-datepicker/assets/140262490/75088b07-0dcf-4e9a-858d-30809b5ec8ff)
Step 3
![immagine](https://github.com/Hacker0x01/react-datepicker/assets/140262490/d3e93a35-103c-45a1-863b-3dfe129e7fe2)


**Desktop (please complete the following information):**

- OS: Windows 10
- Browser Chrome
- Version 115.0.5790.102 (Official Build) (64-bit)
- Version ReactDatepicker 4.16.8

**Additional context**
I tryed in a previous versione of react-datepicker (4.8.0) and it worked, so i think is a regression


Pull request description:
Fix #4170: Clear the previously selected date on empty input with showTimeSelectOnly
Closes #4170

### Summary
This PR addresses an issue where the DatePicker was not clearing the previously selected time when the user deletes the value in the date input via keyboard.  This issue was only coming when the `showTimeSelectOnly` is enabled.

### Changes Made:

- I updated the new date value only if the value exist, else set the null value, instead of restoring back to the previously selected value
- I added test cases to validate the above case both with and without `showTimeSelectOnly` using React Test Library

Patch:
diff --git a/src/index.jsx b/src/index.jsx
index bc859495..89885ec7 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -542,21 +542,14 @@ export default class DatePicker extends React.Component {
     if (
       this.props.showTimeSelectOnly &&
       this.props.selected &&
+      date &&
       !isSameDay(date, this.props.selected)
     ) {
-      if (date == null) {
-        date = set(this.props.selected, {
-          hours: getHours(this.props.selected),
-          minutes: getMinutes(this.props.selected),
-          seconds: getSeconds(this.props.selected),
-        });
-      } else {
-        date = set(this.props.selected, {
-          hours: getHours(date),
-          minutes: getMinutes(date),
-          seconds: getSeconds(date),
-        });
-      }
+      date = set(this.props.selected, {
+        hours: getHours(date),
+        minutes: getMinutes(date),
+        seconds: getSeconds(date),
+      });
     }
     if (date || !event.target.value) {
       this.setSelected(date, event, true);


Test patch:
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index 1f93294b..9e0285df 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -4,6 +4,7 @@ import { findDOMNode } from "react-dom";
 import TestUtils from "react-dom/test-utils";
 import { enUS, enGB } from "date-fns/locale";
 import { mount } from "enzyme";
+import { render, fireEvent } from "@testing-library/react";
 import defer from "lodash/defer";
 import DatePicker, { registerLocale } from "../src/index.jsx";
 import Day from "../src/day.jsx";
@@ -2102,6 +2103,55 @@ describe("DatePicker", () => {
     });
   });
 
+  it("clears the selected date on empty date input", () => {
+    let date = "2023-10-23 10:00:00";
+    const selected = utils.newDate(date);
+
+    const { container: datepicker } = render(
+      <DatePicker
+        selected={selected}
+        onChange={(d) => {
+          date = d;
+        }}
+        showTimeSelect
+        dateFormat="MMMM d, yyyy h:mm aa"
+      />,
+    );
+
+    const input = datepicker.querySelector(
+      ".react-datepicker__input-container > input",
+    );
+    fireEvent.change(input, { target: { value: "" } });
+
+    expect(date).toBe(null);
+  });
+
+  it("clears the selected date on empty date input with showTimeSelectOnly", () => {
+    const format = "h:mm aa";
+
+    let date = "2022-02-24 10:00:00";
+    const selected = utils.newDate(date);
+
+    const { container: datepicker } = render(
+      <DatePicker
+        selected={selected}
+        onChange={(d) => {
+          date = d;
+        }}
+        showTimeSelectOnly
+        dateFormat={format}
+        timeFormat={format}
+      />,
+    );
+
+    const input = datepicker.querySelector(
+      ".react-datepicker__input-container > input",
+    );
+    fireEvent.change(input, { target: { value: "" } });
+
+    expect(date).toBe(null);
+  });
+
   it("should selected month when specified minDate same month", () => {
     const selected = utils.newDate("2023-01-09");
     let date = null;