Skip to content

Commit acf5824

Browse files
anveshmekalabenelan
authored andcommitted
fix(input-date-picker): no longer close while navigating months with chevron actions (#11525)
**Related Issue:** #11534 ## Summary No longer close `input-date-picker` while navigating between months with chevron actions & min/max are assigned adjacent month values.
1 parent 9bb32f6 commit acf5824

File tree

2 files changed

+35
-1
lines changed

2 files changed

+35
-1
lines changed

packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,10 @@ export class DatePickerMonthHeader extends LitElement {
351351

352352
if (isTargetLastValidMonth) {
353353
if (!this.position) {
354-
await (isDirectionLeft ? this.nextMonthAction.setFocus() : this.prevMonthAction.setFocus());
354+
const target = isDirectionLeft ? this.nextMonthAction : this.prevMonthAction;
355+
// enabling the action to be focusable when min & max are one month apart.
356+
target.disabled = false;
357+
await target.setFocus();
355358
} else {
356359
this.yearInputEl.value.focus();
357360
}

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

+31
Original file line numberDiff line numberDiff line change
@@ -1608,6 +1608,37 @@ describe("calcite-input-date-picker", () => {
16081608
expect(await calendar.isVisible()).toBe(true);
16091609
});
16101610

1611+
it("should not close date-picker when user navigate using chevrons & min, max are set to adjacent months", async () => {
1612+
const page = await newE2EPage();
1613+
await page.setContent(
1614+
html`<calcite-input-date-picker
1615+
min="2024-08-10"
1616+
value="2024-09-15"
1617+
max="2024-09-14"
1618+
></calcite-input-date-picker>`,
1619+
);
1620+
1621+
const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);
1622+
expect(await calendar.isVisible()).toBe(false);
1623+
1624+
const input = await page.find("calcite-input-date-picker >>> calcite-input-text");
1625+
await input.click();
1626+
await page.waitForChanges();
1627+
expect(await calendar.isVisible()).toBe(true);
1628+
1629+
await navigateMonth(page, "previous");
1630+
await page.waitForChanges();
1631+
expect(await calendar.isVisible()).toBe(true);
1632+
1633+
await navigateMonth(page, "next");
1634+
await page.waitForChanges();
1635+
expect(await calendar.isVisible()).toBe(true);
1636+
1637+
await navigateMonth(page, "previous");
1638+
await page.waitForChanges();
1639+
expect(await calendar.isVisible()).toBe(true);
1640+
});
1641+
16111642
it("should not close date-picker when user navigate to last valid month in range", async () => {
16121643
const page = await newE2EPage();
16131644
await page.setContent(

0 commit comments

Comments
 (0)