Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(components): Keep only one DatePicker open at a time #2397

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix(components): Keep only one DatePicker open at a time #2397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
588b485
first pass at allowing one Datepicker to be open at a time
taylorvnoj Feb 25, 2025
c0e1452
use useId instead to generate Datepicker ids
taylorvnoj Feb 25, 2025
03e10a8
use direct ref approach instead of events
taylorvnoj Feb 25, 2025
d812a93
remove maxlines for file
taylorvnoj Feb 25, 2025
8da1e03
remove comments and add a DateRange story in InputGroup
taylorvnoj Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion docs/components/InputGroup/Web.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from "react";
import React, { useState } from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { InputGroup } from "@jobber/components/InputGroup";
import { InputTime } from "@jobber/components/InputTime";
import { InputText } from "@jobber/components/InputText";
import { InputDate } from "@jobber/components/InputDate";

export default {
title: "Components/Forms and Inputs/InputGroup/Web",
Expand Down Expand Up @@ -49,6 +50,27 @@ const NestedTemplate: ComponentStory<typeof InputGroup> = args => {
);
};

const DateRangeTemplate: ComponentStory<typeof InputGroup> = args => {
const [startDate, setStartDate] = useState(new Date("2024-01-01"));
const [endDate, setEndDate] = useState(new Date("2024-12-31"));

return (
<InputGroup {...args}>
<InputDate
value={startDate}
onChange={setStartDate}
placeholder="Start Date"
/>
<InputDate
value={endDate}
onChange={setEndDate}
placeholder="End Date"
minDate={startDate}
/>
</InputGroup>
);
};

export const Basic = BasicTemplate.bind({});
Basic.args = {
flowDirection: "vertical",
Expand All @@ -58,3 +80,8 @@ export const Nested = NestedTemplate.bind({});
Nested.args = {
flowDirection: "vertical",
};

export const DateRange = DateRangeTemplate.bind({});
DateRange.args = {
flowDirection: "horizontal",
};
45 changes: 29 additions & 16 deletions packages/components/src/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ interface DatePickerInlineProps extends BaseDatePickerProps {

type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;

const openDatePickerRef = { current: null as ReactDatePicker | null };

/*eslint max-statements: ["error", 13]*/
export function DatePicker({
onChange,
Expand Down Expand Up @@ -115,7 +117,7 @@ export function DatePicker({
const datePickerClassNames = classnames(styles.datePicker, {
[styles.inline]: inline,
});
const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
const { pickerRef } = useEscapeKeyToCloseDatePicker(open);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the ref removed from here wasn't needed for ESC key functionality; ESC key handler only needs pickerRef to call setOpen(false) and doesn't need the wrapper's ref.


if (smartAutofocus) {
useRefocusOnActivator(open);
Expand Down Expand Up @@ -170,35 +172,46 @@ export function DatePicker({
}

function handleCalendarOpen() {
if (
openDatePickerRef.current &&
openDatePickerRef.current !== pickerRef.current
) {
openDatePickerRef.current.setOpen(false);
}

openDatePickerRef.current = pickerRef.current;
Comment on lines +175 to +182
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checks if there's already an open picker that's different from the current one and if found, closes the other picker.

setOpen(true);
}

function handleCalendarClose() {
if (openDatePickerRef.current === pickerRef.current) {
openDatePickerRef.current = null;
}
setOpen(false);
}
}

function useEscapeKeyToCloseDatePicker(
open: boolean,
ref: React.RefObject<HTMLDivElement>,
): { pickerRef: React.RefObject<ReactDatePicker> } {
function useEscapeKeyToCloseDatePicker(open: boolean): {
pickerRef: React.RefObject<ReactDatePicker>;
} {
const pickerRef = useRef<ReactDatePicker>(null);

const escFunction = (event: KeyboardEvent) => {
if (event.key === "Escape" && open) {
// Close the picker ourselves and prevent propagation so that ESC presses with the picker open
// do not close parent elements that may also be listening for ESC presses such as Modals
pickerRef.current?.setOpen(false);
event.stopPropagation();
}
};
useEffect(() => {
ref.current?.addEventListener("keydown", escFunction);
const escFunction = (event: KeyboardEvent) => {
if (event.key === "Escape" && open) {
// Close the picker ourselves and prevent propagation so that ESC presses with the picker open
// do not close parent elements that may also be listening for ESC presses such as Modals
pickerRef.current?.setOpen(false);
event.stopPropagation();
}
};

document.addEventListener("keydown", escFunction, true);

return () => {
ref.current?.removeEventListener("keydown", escFunction);
document.removeEventListener("keydown", escFunction, true);
};
}, [open, ref, pickerRef]);
}, [open]);

return {
pickerRef,
Expand Down