Skip to content

Focus on first invalid field for wizard #1836

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

Open
rajatofficial wants to merge 4 commits into
base: master
Choose a base branch
from
+18 −1
Open

Focus on first invalid field for wizard #1836

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
682c9cd
focus on first invalid field for wizard
rajatkhurana-adobe Mar 10, 2026
22e0f48
removed console log
rajatkhurana-adobe Mar 13, 2026
27652b8
test case added
rajatkhurana-adobe Mar 16, 2026
c23080b
only removed
rajatkhurana-adobe Mar 16, 2026
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
5 changes: 4 additions & 1 deletion ...t/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@

constructor(params) {
super(params);
const {element} = params;
const {element, formContainer} = params;
Copy link
Copy Markdown
Collaborator

@rismehta rismehta Mar 17, 2026

Choose a reason for hiding this comment

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

formContainer is stored here but never guarded before use. If any caller constructs the wizard view without passing formContainer in params (e.g. a subclass, test harness, or future refactor), this.formContainer will be undefined and the setFocus call in #navigateToNextTab will throw. Consider either asserting it is present here (if (!formContainer) console.warn(...)) or using optional chaining at the call site.

this.formContainer = formContainer;
this.cacheElements(element);
this.setActive(this.getCachedTabs())
this._active = this.getActiveIndex(this.getCachedTabs());
Expand Down Expand Up @@ -232,6 +233,8 @@
if (tabs && nextVisibleIndex >= 0) {
this.#navigateAndFocusTab(nextVisibleIndex);
}
} else {
this.formContainer.setFocus(validationErrorList[0].fieldName);
Copy link
Copy Markdown
Collaborator

@rismehta rismehta Mar 17, 2026

Choose a reason for hiding this comment

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

No null guard on this.formContainer. If formContainer was not passed in params for any reason, this crashes with Cannot read properties of undefined (reading 'setFocus'). Safer as:

this.formContainer?.setFocus(validationErrorList[0].fieldName);

}
this.#hideUnhideNavButtons(this._active);
}
Expand Down
14 changes: 14 additions & 0 deletions ui.tests/test-module/specs/wizard/wizard.runtime.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,20 @@ describe("Form with Wizard Layout Container With Validation", () => {
})
})
});

it("should stay on current tab and show validation errors when next is clicked with invalid fields", () => {
getTabs().should('have.length', 5);
getWizardPanels().should('have.length', 5);
getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
Copy link
Copy Markdown
Collaborator

@rismehta rismehta Mar 17, 2026

Choose a reason for hiding this comment

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

The test verifies the tab stays active and error messages appear, but the main new behavior — that focus moves to the first invalid field — is not asserted. The setFocus call is the entire point of this change. Consider adding something like:

// verify focus landed on the first invalid field
cy.focused().closest('[data-cmp-is]').should('have.attr', 'data-cmp-is');

or checking document.activeElement is within the first errored component. Without this, a regression in setFocus would not be caught by this test.


getNextButton().click({force: true}).then(() => {
getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active');
getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active');
getWizardPanelAtIndex(0).find('.cmp-adaptiveform-numberinput__errormessage').should('be.visible');
getWizardPanelAtIndex(0).find('.cmp-adaptiveform-datepicker__errormessage').should('be.visible');
});
});
});

describe("Form with Wizard Layout Container with focus", () => {
Expand Down
Loading