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(datepicker): adds Optional chaining #18046

Merged
merged 5 commits into from
Nov 13, 2024
Merged

fix(datepicker): adds Optional chaining #18046

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
b036f77
fix(datepicker): adds Optional chaining
2nikhiltom Nov 12, 2024
71e0e14
Merge branch 'main' into datepicker-bug-fix-17794
2nikhiltom Nov 12, 2024
e4447ae
Merge branch 'main' into datepicker-bug-fix-17794
2nikhiltom Nov 13, 2024
eb9a612
test(datepicker): adds test for console warnings
2nikhiltom Nov 13, 2024
081abef
Merge branch 'main' into datepicker-bug-fix-17794
2nikhiltom Nov 13, 2024
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
41 changes: 41 additions & 0 deletions packages/react/src/components/DatePicker/DatePicker-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,4 +712,45 @@ describe('Date picker with minDate and maxDate', () => {
await userEvent.keyboard('{escape}');
expect(screen.getByRole('application')).not.toHaveClass('open');
});
it('clearing end date should not cause console warnings', async () => {
const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});

render(
<DatePicker onChange={() => {}} datePickerType="range" dateFormat="m/d/Y">
<DatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start Date"
data-testid="input-value-start"
/>
<DatePickerInput
id="date-picker-input-id-end"
placeholder="mm/dd/yyyy"
labelText="End Date"
data-testid="input-value-end"
/>
</DatePicker>
);
await userEvent.type(
screen.getByLabelText('Start Date'),
'01/01/2024{enter}'
);
await userEvent.type(
screen.getByLabelText('End Date'),
'01/15/2024{enter}'
);

// Ensure the dates are correctly populated
expect(screen.getByLabelText('Start Date')).toHaveValue('01/01/2024');
expect(screen.getByLabelText('End Date')).toHaveValue('01/15/2024');

// Clear the end date
await userEvent.clear(screen.getByLabelText('End Date'));
expect(screen.getByLabelText('End Date')).toHaveValue('');

// Click on the start date input after clearing the end date
await userEvent.click(screen.getByLabelText('Start Date'));
expect(warn).not.toHaveBeenCalled();
warn.mockRestore();
});
});
4 changes: 2 additions & 2 deletions packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default (config) => (fp) => {
if (inputTo === target && fp.selectedDates[1]) {
// Using getTime() enables the ability to more readily compare the date currently
// selected in the calendar and the date currently in the value of the input
const withoutTime = (date) => date.setHours(0, 0, 0, 0);
const withoutTime = (date) => date?.setHours(0, 0, 0, 0);
const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
const currentValueToDate = withoutTime(
parseDateWithFormat(inputTo.value)
Expand All @@ -104,7 +104,7 @@ export default (config) => (fp) => {
}
}

const isValidDate = (date) => date.toString() !== 'Invalid Date';
const isValidDate = (date) => date?.toString() !== 'Invalid Date';
// save end date in calendar inmediately after it's been written down
if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
if (isValidDate(parseDateWithFormat(inputTo.value))) {
Expand Down
Loading