Merge pull request #5088 from qburst/issue-4949/fix/custom-time-date-…

…picker-focus-issue

🐛 Resolve the double-click focus issue of Time input and custom time component example

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" }}
     />
   );

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) => {

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);
+  });
 });