🐛 Resolve double-click focus issue on Time input and custom time comp…

…onent example

- 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

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