dreamweiver
commented
2 months ago @Soumadeep1993
Out of the 2 issues,
- Overlapping content area [PR is created with the fix, https://github.com/SAP/fundamental-ngx/pull/12361 ]
- 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.
Is this a bug, enhancement, or feature request?
Bug
Describe your proposal.
Interactive elements get overlapped on the floating footer and the progress bar in the top of Wizard.
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.