From 41f180fc9b66c97a33ce03b4feb79a0ea0e6dc44 Mon Sep 17 00:00:00 2001
From: Balaji Sridharan <balaji.sridharan@nyulangone.org>
Date: Tue, 10 Sep 2024 16:40:56 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Resolve=20double-click=20focus?=
 =?UTF-8?q?=20issue=20on=20Time=20input=20and=20custom=20time=20component?=
 =?UTF-8?q?=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Manually trigger focus on Time input when received the click event to override the default behavior of the selected date tabIndex 0
---
 docs-site/src/examples/customTimeInput.js |  1 +
 src/input_time.tsx                        |  8 +++++++-
 src/test/time_input_test.test.tsx         | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/customTimeInput.js
index a28971b2d..bb62566f6 100644
--- a/docs-site/src/examples/customTimeInput.js
+++ b/docs-site/src/examples/customTimeInput.js
@@ -4,6 +4,7 @@
     <input
       value={value}
       onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => e.target?.focus()}
       style={{ border: "solid 1px pink" }}
     />
   );
diff --git a/src/input_time.tsx b/src/input_time.tsx
index d039d2ceb..0fe8234ff 100644
--- a/src/input_time.tsx
+++ b/src/input_time.tsx
@@ -32,6 +32,8 @@ export default class InputTime extends Component<
   InputTimeProps,
   InputTimeState
 > {
+  inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+
   constructor(props: InputTimeProps) {
     super(props);
 
@@ -86,8 +88,12 @@ export default class InputTime extends Component<
       <input
         type="time"
         className="react-datepicker-time__input"
-        placeholder="Time"
+        placeholder="Time1"
         name="time-input"
+        ref={this.inputRef}
+        onClick={() => {
+          this.inputRef.current?.focus();
+        }}
         required
         value={time}
         onChange={(event) => {
diff --git a/src/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx
index 7dd8fb049..bc332753e 100644
--- a/src/test/time_input_test.test.tsx
+++ b/src/test/time_input_test.test.tsx
@@ -161,4 +161,19 @@ describe("timeInput", () => {
 
     dateSpy.mockRestore();
   });
+
+  it("should focus on the time input when the time input gets the click event", () => {
+    const { container } = render(
+      <DatePicker shouldCloseOnSelect={false} showTimeInput />,
+    );
+
+    const input = safeQuerySelector(container, "input");
+    fireEvent.focus(input);
+    const timeInput = safeQuerySelector<HTMLInputElement>(
+      container,
+      'input[type="time"].react-datepicker-time__input',
+    );
+    fireEvent.click(timeInput);
+    expect(document.activeElement).toBe(timeInput);
+  });
 });