Custom time input needs 2 clicks to focus

[kmsomebody]

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.
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.

[ezParth]

Hi @martijnrusschen,

Please assign this issue to me. I'll work on this.

[ezParth]

Hey I have create a pull request, you can out the solution there. Now the input bar is getting toggled in one click @kmsomebody

[balajis-qb]

When I analyzed this issue, it's not related to the example of the custom time input we use. But also with the default time input.

We can reproduce the double click time input issue mentioned using one of the following code

1. Default Time Input

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      shouldCloseOnSelect={false}
      showTimeInput
    />
  );
};

2. Custom Time Input

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomInput = forwardRef(
    ({ value, onClick, className }, ref) => (
      <button className={className} onClick={onClick} ref={ref}>
        {value}
      </button>
    ),
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      customInput={<ExampleCustomInput className="example-custom-input" />}
    />
  );
};

@martijnrusschen, can you please assign this issue to me. I fixed the issue, will raise a PR in sometime.