Skip to content

fix(ui5-calendar): remove auto-focus logic in onAfterRendering() hook #12066

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

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from
Draft

fix(ui5-calendar): remove auto-focus logic in onAfterRendering() hook #12066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e74a9ca
fix(ui5-calendar): remove auto-focus logic in onAfterRendering() hook
hinzzx Aug 4, 2025
3edec0a
fix: fix tests, remove focus locked in calendar
hinzzx Aug 5, 2025
42418ba
fix: fix dp test
hinzzx Aug 8, 2025
1577502
fix: address comments
hinzzx Aug 11, 2025
8eaf2a9
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 11, 2025
0c48089
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 11, 2025
65016f7
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 13, 2025
463c2a3
chore: address discussion comments
hinzzx Aug 13, 2025
ab9579a
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 16, 2025
0f0e3e3
chore: revert and add async/await to async methods
hinzzx Aug 16, 2025
edd1519
fix: stabilize tests by reordering them
hinzzx Aug 19, 2025
935eac0
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 21, 2025
fe80356
Revert "fix: stabilize tests by reordering them"
hinzzx Aug 22, 2025
961225d
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Aug 22, 2025
a3197a3
test: wait for focus
hinzzx Aug 22, 2025
c64a559
Merge branch 'main' into remove-auto-foc-pickers
hinzzx Sep 4, 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
39 changes: 37 additions & 2 deletions packages/main/cypress/specs/Calendar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -408,9 +408,19 @@ describe("Calendar general interaction", () => {
.find("[ui5-daypicker]")
.shadow()
.find("[tabindex='0']")
.realClick();
.realClick()
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearpicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageUp");

cy.get<Calendar>("#calendar1")
Expand All @@ -419,6 +429,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1980, 9, 1, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearpicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageDown");

cy.get<Calendar>("#calendar1")
Expand All @@ -441,6 +459,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1998, 9, 16, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearrangepicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageUp");

cy.get<Calendar>("#calendar1")
Expand All @@ -463,6 +489,14 @@ describe("Calendar general interaction", () => {
expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1998, 9, 16, 0, 0, 0)));
});

// Wait for focus to settle before proceeding
cy.get<Calendar>("#calendar1")
.shadow()
.find("[ui5-yearrangepicker]")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("PageDown");

cy.get<Calendar>("#calendar1")
Expand Down Expand Up @@ -503,7 +537,8 @@ describe("Calendar general interaction", () => {
cy.get<Calendar>("#calendar1").invoke("prop", "timestamp", timestamp);

cy.ui5CalendarGetDay("#calendar1", timestamp.toString())
.focus();
.focus()
.should("have.focus");

// Select the focused date
cy.focused().realPress("Space");
Expand Down
58 changes: 53 additions & 5 deletions packages/main/cypress/specs/DatePicker.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,12 +512,35 @@ describe("Date Picker Tests", () => {
.as("datePicker")
.ui5DatePickerValueHelpIconPress();

// Focus the day picker's focusable element first
cy.get<DatePicker>("@datePicker")
.shadow()
.find("ui5-calendar")
.as("calendar")
.realPress(["Shift", "F4"])
.realPress("F4");
.shadow()
.find("ui5-daypicker")
.shadow()
.find("[tabindex='0']")
.should("be.visible")
.focus()
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

// Wait for year picker to be visible and focused
cy.get("@calendar")
.shadow()
.find("ui5-yearpicker")
.should("be.visible");

cy.get("@calendar")
.shadow()
.find("ui5-yearpicker")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress("F4");

cy.get("@calendar")
.shadow()
Expand All @@ -532,12 +555,35 @@ describe("Date Picker Tests", () => {
.as("datePicker")
.ui5DatePickerValueHelpIconPress();

// Focus the day picker's focusable element first
cy.get<DatePicker>("@datePicker")
.shadow()
.find("ui5-calendar")
.as("calendar")
.realPress("F4")
.realPress(["Shift", "F4"]);
.shadow()
.find("ui5-daypicker")
.shadow()
.find("[tabindex='0']")
.should("be.visible")
.focus()
.should("have.focus");

cy.focused().realPress("F4");

// Wait for month picker to be visible and focused
cy.get("@calendar")
.shadow()
.find("ui5-monthpicker")
.should("be.visible");

cy.get("@calendar")
.shadow()
.find("ui5-monthpicker")
.shadow()
.find("[tabindex='0']")
.should("have.focus");

cy.focused().realPress(["Shift", "F4"]);

cy.get("@calendar")
.shadow()
Expand Down Expand Up @@ -1664,7 +1710,9 @@ describe("Legacy date customization and Islamic calendar type", () => {
.ui5DatePickerGetInnerInput()
.as("input")
.realClick()
.should("be.focused")
.should("be.focused");

cy.get("@input")
.realType("Rab. I 6, 1440 AH")
.realPress("Enter");

Expand Down
Loading
Loading