Skip to content

Commit cd92586

Browse files
jcfrancojcfranco
authored
fix(input-date-picker): ensure range input toggling is consistent (#8414)
**Related Issue:** #6501 ## Summary This fixes an issue where the start/end picker would not update after being toggled and displayed on the toggled side.
1 parent f5c28cc commit cd92586

File tree

4 files changed

+314
-67
lines changed

4 files changed

+314
-67
lines changed

‎packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

+259-35
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,11 @@ describe("calcite-input-date-picker", () => {
133133
await input.click();
134134
await page.waitForChanges();
135135
await page.waitForTimeout(animationDurationInMs);
136-
const wrapper = await page.waitForFunction(() =>
137-
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(".calendar-picker-wrapper")
136+
const wrapper = await page.waitForFunction(
137+
(calendarWrapperClass: string) =>
138+
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
139+
{},
140+
CSS.calendarWrapper
138141
);
139142
expect(await wrapper.isIntersectingViewport()).toBe(true);
140143

@@ -202,9 +205,13 @@ describe("calcite-input-date-picker", () => {
202205
await page.waitForChanges();
203206
await page.waitForTimeout(animationDurationInMs);
204207

205-
const wrapper = await page.waitForFunction(() =>
206-
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(".calendar-picker-wrapper")
208+
const wrapper = await page.waitForFunction(
209+
(calendarWrapperClass: string) =>
210+
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
211+
{},
212+
CSS.calendarWrapper
207213
);
214+
208215
expect(await wrapper.isIntersectingViewport()).toBe(true);
209216

210217
const inputtedStartDate = "1/1/2020";
@@ -318,50 +325,267 @@ describe("calcite-input-date-picker", () => {
318325
let page: E2EPage;
319326
let inputDatePicker: E2EElement;
320327

321-
beforeEach(async () => {
322-
page = await newE2EPage();
323-
await page.setContent(html` <calcite-input-date-picker value="2000-11-27"></calcite-input-date-picker>`);
324-
await skipAnimations(page);
325-
await page.waitForChanges();
326-
inputDatePicker = await page.find("calcite-input-date-picker");
327-
});
328+
describe("single value", () => {
329+
beforeEach(async () => {
330+
page = await newE2EPage();
331+
await page.setContent(html` <calcite-input-date-picker value="2000-11-27"></calcite-input-date-picker>`);
332+
await skipAnimations(page);
333+
await page.waitForChanges();
334+
inputDatePicker = await page.find("calcite-input-date-picker");
335+
});
328336

329-
it("toggles the date picker when clicked", async () => {
330-
let calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
337+
it("toggles the date picker when clicked", async () => {
338+
let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
331339

332-
expect(await calendar.isVisible()).toBe(false);
340+
expect(await calendar.isVisible()).toBe(false);
333341

334-
await inputDatePicker.click();
335-
await page.waitForChanges();
336-
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
342+
await inputDatePicker.click();
343+
await page.waitForChanges();
344+
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
337345

338-
expect(await calendar.isVisible()).toBe(true);
346+
expect(await calendar.isVisible()).toBe(true);
339347

340-
await inputDatePicker.click();
341-
await page.waitForChanges();
342-
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
348+
await inputDatePicker.click();
349+
await page.waitForChanges();
350+
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
351+
352+
expect(await calendar.isVisible()).toBe(false);
353+
});
354+
355+
it("toggles the date picker when using arrow down/escape key", async () => {
356+
let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
357+
358+
expect(await calendar.isVisible()).toBe(false);
343359

344-
expect(await calendar.isVisible()).toBe(false);
360+
await inputDatePicker.callMethod("setFocus");
361+
await page.waitForChanges();
362+
await page.keyboard.press("ArrowDown");
363+
await page.waitForChanges();
364+
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
365+
366+
expect(await calendar.isVisible()).toBe(true);
367+
368+
await page.keyboard.press("Escape");
369+
await page.waitForChanges();
370+
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
371+
372+
expect(await calendar.isVisible()).toBe(false);
373+
});
345374
});
346375

347-
it("toggles the date picker when using arrow down/escape key", async () => {
348-
let calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
376+
describe("range", () => {
377+
beforeEach(async () => {
378+
page = await newE2EPage();
379+
await page.setContent(html` <calcite-input-date-picker range></calcite-input-date-picker>`);
380+
await skipAnimations(page);
381+
await page.waitForChanges();
382+
inputDatePicker = await page.find("calcite-input-date-picker");
383+
});
349384

350-
expect(await calendar.isVisible()).toBe(false);
385+
async function isCalendarVisible(calendar: E2EElement, type: "start" | "end"): Promise<boolean> {
386+
const calendarPosition = calendar.classList.contains(CSS.calendarWrapperEnd) ? "end" : "start";
387+
return (await calendar.isVisible()) && calendarPosition === type;
388+
}
351389

352-
await inputDatePicker.callMethod("setFocus");
353-
await page.waitForChanges();
354-
await page.keyboard.press("ArrowDown");
355-
await page.waitForChanges();
356-
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
390+
it("toggles the date picker when clicked", async () => {
391+
const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
357392

358-
expect(await calendar.isVisible()).toBe(true);
393+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
394+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
359395

360-
await page.keyboard.press("Escape");
361-
await page.waitForChanges();
362-
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
396+
const startInput = await page.find(
397+
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] calcite-input-text`
398+
);
399+
const startInputToggle = await page.find(
400+
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] .${CSS.toggleIcon}`
401+
);
402+
403+
const endInput = await page.find(
404+
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] calcite-input-text`
405+
);
406+
const endInputToggle = await page.find(
407+
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] .${CSS.toggleIcon}`
408+
);
409+
410+
// toggling via start date input
411+
412+
await startInput.click();
413+
await page.waitForChanges();
414+
415+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
416+
417+
await startInput.click();
418+
await page.waitForChanges();
419+
420+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
421+
422+
// toggling via start date toggle icon
423+
424+
await startInputToggle.click();
425+
await page.waitForChanges();
426+
427+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
428+
429+
await startInputToggle.click();
430+
await page.waitForChanges();
431+
432+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
433+
434+
// toggling via end date input
435+
436+
await endInput.click();
437+
await page.waitForChanges();
438+
439+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
440+
441+
await endInput.click();
442+
await page.waitForChanges();
443+
444+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
445+
446+
// toggling via end date toggle icon
447+
448+
await endInputToggle.click();
449+
await page.waitForChanges();
450+
451+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
452+
453+
await endInputToggle.click();
454+
await page.waitForChanges();
455+
456+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
457+
458+
// toggling via start date input and toggle icon
459+
460+
await startInput.click();
461+
await page.waitForChanges();
462+
463+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
464+
465+
await startInputToggle.click();
466+
await page.waitForChanges();
467+
468+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
363469

364-
expect(await calendar.isVisible()).toBe(false);
470+
// toggling via start toggle icon and date input
471+
472+
await startInputToggle.click();
473+
await page.waitForChanges();
474+
475+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
476+
477+
await startInput.click();
478+
await page.waitForChanges();
479+
480+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
481+
482+
// toggling via end date input and toggle icon
483+
484+
await endInput.click();
485+
await page.waitForChanges();
486+
487+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
488+
489+
await endInputToggle.click();
490+
await page.waitForChanges();
491+
492+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
493+
494+
// toggling via end toggle icon and date input
495+
496+
await endInputToggle.click();
497+
await page.waitForChanges();
498+
499+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
500+
501+
await endInput.click();
502+
await page.waitForChanges();
503+
504+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
505+
506+
// toggling via start date input and end toggle icon
507+
508+
await startInput.click();
509+
await page.waitForChanges();
510+
511+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
512+
513+
await endInputToggle.click();
514+
await page.waitForChanges();
515+
516+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
517+
518+
// toggling via start toggle icon and date input
519+
520+
await startInputToggle.click();
521+
await page.waitForChanges();
522+
523+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
524+
525+
await endInput.click();
526+
await page.waitForChanges();
527+
528+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
529+
530+
// close
531+
await endInput.click();
532+
await page.waitForChanges();
533+
534+
// toggling via end date input and start toggle icon
535+
536+
await endInput.click();
537+
await page.waitForChanges();
538+
539+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
540+
541+
await startInputToggle.click();
542+
await page.waitForChanges();
543+
544+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
545+
546+
// toggling via end toggle icon and start date input
547+
548+
await endInputToggle.click();
549+
await page.waitForChanges();
550+
551+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
552+
553+
await startInput.click();
554+
await page.waitForChanges();
555+
556+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
557+
});
558+
559+
it("toggles the date picker when using arrow down/escape key", async () => {
560+
const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
561+
562+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
563+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
564+
565+
await inputDatePicker.callMethod("setFocus");
566+
await page.waitForChanges();
567+
await page.keyboard.press("ArrowDown");
568+
await page.waitForChanges();
569+
570+
expect(await isCalendarVisible(calendar, "start")).toBe(true);
571+
572+
await page.keyboard.press("Escape");
573+
await page.waitForChanges();
574+
575+
expect(await isCalendarVisible(calendar, "start")).toBe(false);
576+
577+
await page.keyboard.press("Tab");
578+
579+
await page.keyboard.press("ArrowDown");
580+
await page.waitForChanges();
581+
582+
expect(await isCalendarVisible(calendar, "end")).toBe(true);
583+
584+
await page.keyboard.press("Escape");
585+
await page.waitForChanges();
586+
587+
expect(await isCalendarVisible(calendar, "end")).toBe(false);
588+
});
365589
});
366590
});
367591

‎packages/calcite-components/src/components/input-date-picker/input-date-picker.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
@include disabled();
3232

33-
.calendar-picker-wrapper {
33+
.calendar-wrapper {
3434
@apply shadow-none;
3535
transform: translate3d(0, 0, 0);
3636
}
@@ -79,7 +79,7 @@
7979
items-start;
8080
}
8181

82-
.calendar-picker-wrapper--end {
82+
.calendar-wrapper--end {
8383
transform: translate3d(0, 0, 0);
8484
}
8585

0 commit comments

Comments
 (0)