search

Altinn / app-frontend-react

Altinn application React frontend
BSD 3-Clause "New" or "Revised" License
18 stars 31 forks source link

It's possible to skip answering required components if you click the next button before they appear. #1915

Open EirikOlavHaugenSSB opened 8 months ago

EirikOlavHaugenSSB commented 8 months ago

Description of the bug

If you have a component which is required to answer, but only appears after answering another one on the same page, it's possible to click the skip button before the component is able to load. If the next pages also depend on the question being answered it might skip or mess up the following pages if they depend on the answers before.

It seems the slower the component loads the easier it is to perform.

Steps To Reproduce

Example:

  1. Go to https://altinn.studio/repos/EirikOlavHaugenSSB/ra0797-01 and look at commit "08e12e6076240a32a86138887394810cf5b45401" (Date 11.03.24)
  2. Pick the first option on the first question (Page 2)
  3. Navigate to page 8 (page 12 in code, "S12_IntermodalTransport.json")
  4. Chose an option on the question on page 8, and watch a repeating group appear.
  5. Try to do it fast and you can skip the required components entirely.

Additional Information

No response

EirikOlavHaugenSSB commented 8 months ago

Seems to be an issue for most if not all applications. For 3 schemas I have tested at least.

olemartinorg commented 7 months ago

@EirikOlavHaugenSSB Did you try to set validateOnNext on the navigation buttons for that page? See the docs here: https://docs.altinn.studio/app/development/ux/pages/navigation/#validation-on-page-navigation

The default functionality in Altinn 3 forms is to not show validation messages about required fields until the user tries to submit the form, but you can override that setting if you have to (for example if the user has to fill out a field in order for the rest of the form to make sense by hiding/showing the correct fields, etc).

EirikOlavHaugenSSB commented 7 months ago

validateOnNext is set currently as: validateOnNext": { "page": "current", "show": [ "All" ] }

The page works "properly" if you are sufficiently slow to click the next button after answering "yes" to the pervious question (around 0.5 seconds). I am planning to run this validateOnNext for all pages in the form, but have only applied it to a few pages for testing at the moment. Anything I can supply to make it easier to reproduce? I believe it's possible to do it in most forms, but it's easier to do it when there's more things to load as the form is slower.

olemartinorg commented 7 months ago

Thanks! I think it makes sense, then. I'll link in this issue as related, as I'm working on general performance improvements that might fix this problem as well:

EirikOlavHaugenSSB commented 7 months ago

Yesterday I found a bug I think is related to this one. With a yes/no question that hides the next page when you select "no" and shows it when "yes" is selected. Going from having picked "yes" to picking "no" and clicking the "next" button quickly it will take you all the way back to the first page instead of the next page. I suspect it's some sort of default to return to the start when the form is trying to reach a page which is currently hidden.

EirikOlavHaugenSSB commented 4 days ago

I believe this is no longer an issue since the navigation-buttons locks down and becomes unclickable when you fill out parts of the form?