Skip to content

Commit

Permalink
Merge pull request #5088 from qburst/issue-4949/fix/custom-time-date-…
Browse files Browse the repository at this point in the history
…picker-focus-issue

🐛 Resolve the double-click focus issue of Time input and custom time component example
  • Loading branch information
martijnrusschen authored Sep 14, 2024
2 parents 2629ce9 + 41f180f commit 5221ac6
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 1 deletion.
1 change: 1 addition & 0 deletions docs-site/src/examples/customTimeInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<input
value={value}
onChange={(e) => onChange(e.target.value)}
onClick={(e) => e.target?.focus()}
style={{ border: "solid 1px pink" }}
/>
);
Expand Down
8 changes: 7 additions & 1 deletion src/input_time.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export default class InputTime extends Component<
InputTimeProps,
InputTimeState
> {
inputRef: React.RefObject<HTMLInputElement> = React.createRef();

constructor(props: InputTimeProps) {
super(props);

Expand Down Expand Up @@ -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) => {
Expand Down
15 changes: 15 additions & 0 deletions src/test/time_input_test.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

0 comments on commit 5221ac6

Please sign in to comment.