In Wizard Component interactive elements overlap issue over floating footer and progress bar.

[Soumadeep1993]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

1. Interactive elements get overlapped on the floating footer and the progress bar in the top of Wizard.

2. Also, in the wizard steps if we once reach till summary, and then move back to any previous step and provide invalid inputs, the Next button gets disabled but still the next steps link at the top in the progress indicator is active and remains clickable. This surely causes bugs as the user can still go to summary and finish the final step even after entering an invalid input in any of the before steps.

Can you handle that on the application side

No

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

0.50.2

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Wizard Dialog component.

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

https://stackblitz.com/edit/nzkgwz?file=src%2Fapp%2Fwizard-dialog-example.component.ts

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

[dreamweiver]

@Soumadeep1993

Out of the 2 issues,

1. Overlapping content area [PR is created with the fix, https://github.com/fix(core): wizard content overllaping fixed #12361 ]
2. Validation of steps at wizard navigation bar [validation at wizard is solely dependant on the consuming application]

Wizard Validation and how it works:
The developer is fully responsible for creating any or all validation on the wizard component, so it means the validation we see on the next or finish button in the footer is developer defined based on the application's need.

Similarly, the validation on the navigation bar at the top of the wizard is also controlled by the developer, via an external validation rule.
for example, In the above stackblitz example, the user moves to step 3 and back to step2 to invalidate the form. after this when user tries to navigate to step3, a custom validation rule can be written and passed to the wizard step under stepClickValidator, which checks if the wizard steps before the current step is valid or not.

This custom validation function is executed everytime any step is clicked from navigation bar.

check this working example in the below stackblitz link,
https://stackblitz.com/edit/nzkgwz-m1dngy?file=src%2Fapp%2Fwizard-dialog-example.component.html

Note: although in the official ngx example, simple form fields are used, I would suggest that FormGroup be used to group the form controls for every wizard page, so that checking the validity of such pages would be easy.

[Soumadeep1993]

This issue is still reproducible and not yet fixed with 0.54.1 version. @droshev Can you please verify and let me know when can I expect it to be fixed.

[c-davidbilge]

Unfortunately, this also breaks wizards that are not in a dialog. In this case, the height of the footer is no longer subtracted from the viewport height and the footer disappears below the bottom edge of the viewport.

[droshev]

@c-davidbilge @Soumadeep1993 Can you report a new issue?

[c-davidbilge]

Thank you for your answer. I created a new issue: #13048