Repository: Hacker0x01/react-datepicker (ts)

Issue:
Custom time input needs 2 clicks to focus
**Describe the bug**
The time input does not focus when you click on it the first time. It needs 2 clicks to focus.

**To Reproduce**
1. Go to the ["Custom time input" example](https://reactdatepicker.com/#example-custom-time-input).
2. Click on the datepicker input to open the picker.
3. Click on the time input.
4. The time input is not focused.
5. Click on the time input again.
6. The time input is focused.

**Expected behavior**
The time input should be focused the first time you click on it.

**Desktop**
- OS: Windows 11
- Browser: Firefox Developer Edition 128.0b7 and Chrome 126.0.6478.127

**Additional context**
Upgraded from react-datepicker 4.17.0 to 7.2.0. It was working fine before.

Pull request:
🐛 Resolve the double-click focus issue of Time input and custom time component example
Closes #4949

## **The Issue:**
As I mentioned in the ticket, the issue is with the Time Input of the React Date Picker (both with the default Time Input - `showTimeInput` with `shouldCloseOnSelect` turned off and the Custom Time Input - `customInput`)
![image](https://github.com/user-attachments/assets/7906684c-c1f2-48ea-af5d-a80d0b873d6f)

The issue is whenever we open the datepicker for the first time, and try to change the time before changing the date, now the time input won't get the focus and we need to do double click to get the focus.  Then onwards, single click itself will bring the focus.  The issue occurs only for the first update.

## **Why the issue occurs?**
We are getting the issue because whenever we open the date picker, we auto-focus the selected date or the current date by setting it's tabIndex to 0 and all the other element's tab-index to -1.  As a result we need to get the focus on other elements we need to click it twice.  For all the other elements in the project, this case was handled by the manual highlight.  

## **The Fix**
I fixed the issue by manually setting the focus to the element whenever the time input got clicked and updated the corresponding test-cases. 

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/customTimeInput.js
index a28971b2..bb62566f 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 d039d2ce..0fe8234f 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) => {


Test patch:
diff --git a/src/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx
index 7dd8fb04..bc332753 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);
+  });
 });