BUG: If validation errors occur while entering a Petition and Clerk attempts to enter the data in a field, the screen jumps.

[ttlenard]

Describe the Bug A clear and concise description of what the bug is. When a Petitions clerk is entering in a paper petition and they click Save before all of the required fields are entered, they will receive validation errors indicating that they need to enter in the required data. When this happens, the clerk would then find the field that they missed filling out initially and click their cursor in that field. When they do this, the screen jumps up to the top, back to the validation error message. If they scroll down, they can continue to enter their data, but if there is another field that they initially missed filling out, then when they put their cursor in that field, and attempt to type, the screen will jump again. I also noticed that when I clicked anywhere on the screen after receiving a validation error message, the screen would also jump to the top.

Question: Is this similar to bug #9868?

Business Impact/Reason for Severity Low

In which environment did you see this bug? Test

Who were you logged in as? Petitions Clerk

What were you doing when you discovered this bug? (Using the application, demoing, smoke tests, testing other functionality, etc.) Testing other functionality

To Reproduce Steps to reproduce the behavior:

1. Log in as a Petitions Clerk
2. Click on Document QC
3. Click on Start a Petition
4. Begin to fill out the Petition fields, but leave some of the required fields blank
5. Click Create Case
6. You will receive a validation error, listing the fields that are required
7. Scroll down to the fields that you skipped
8. Add your cursor to the field (note: not ALL of the fields jump. Mailing address didn't, but city, state, zip, phone do on the Petitioner tab.)
9. The screen jumps to the top of the screen to the validation message again
10. You have to scroll down and find the field again to enter the data.
11. The jumpy screen also occurs when you just click on the screen after the validation error is thrown.

Expected Behavior A clear and concise description of what you expected to happen. Screen shouldn't jump around after a validation error. I think it is great on the initial error, but is annoying when it keeps jumping the screen back to the top when you are attempting to add your data to the required fields that you missed initially.

Actual Behavior A clear and concise description of what actually happened. Screen continues to jump up to the validation message when you click on the field that you initially missed. You have to scroll back down the find the field that you missed and THEN you can add data.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Cause of Bug, If Known

Process for Logging a Bug:

• Complete the above information
• Add a severity tag (Critical, High Severity, Medium Severity or Low Severity). See below for priority definition.

Severity Definition:

• Critical Defect Blocks entire system's or module’s functionality No workarounds available Testing cannot proceed further without bug being fixed.

• High-severity Defect Affects key functionality of an application There's a workaround, but not obvious or easy App behaves in a way that is strongly different from the one stated in the requirements

• Medium-severity Defect A minor function does not behave in a way stated in the requirements. Workaround is available and easy

• Low-severity Defect Mostly related to an application’s UI Doesn't need a workaround, because it doesn't impact functionality

Definition of Ready for Bugs(Created 10-4-21)

Definition used: A failure or flaw in the system which produces an incorrect or undesired result that deviates from the expected result or behavior. (Note: Expected results are use cases that have been documented in past user stories as acceptance criteria and test cases, and do not include strange behavior unrelated to use cases.)

The following criteria must be met in order for the development team to begin work on the bug.

The bug must:

• Be focused on solving a user problem
• Contain data for all fields in the bug template, so the team can pick it up and begin working immediately

Process: If the unexpected results are new use cases that have been identified, but not yet built, new acceptance criteria and test cases should be captured in a new user story and prioritized by the product owner.

If the Court is not able to reproduce the bug, add the “Unable to reproduce” tag. This will provide visibility into the type of support that may be needed by the Court. In the event that the Court cannot reproduce the bug, the Court will work with Flexion to communicate what type of troubleshooting help may be needed.

Definition of Done (Updated 4-14-21)

Product Owner

• [ ] Bug fix has been validated in the Court's test environment

Engineering

• [ ] Automated test scripts have been written
• [ ] Field level and page level validation errors (front-end and server-side) integrated and functioning
• [ ] Verify that language for docket record for internal users and external users is identical
• [ ] New screens have been added to pa11y scripts
• [ ] All new functionality verified to work with keyboard and macOS voiceover https://www.apple.com/voiceover/info/guide/_1124.html
• [ ] READMEs, other appropriate docs, JSDocs and swagger/APIs fully updated
• [ ] UI should be touch optimized and responsive for external only (functions on supported mobile devices and optimized for screen sizes as required)
• [ ] Interactors should validate entities before calling persistence methods
• [ ] Code refactored for clarity and to remove any known technical debt
• [ ] Deployed to the Court's test environment if prod-like data is required. Otherwise, deployed to any experimental environment for review.

[Mwindo]

The reason this is happening:

• Across the relevant tabs, we validate when components lose focus (e.g., here) or change selections (e.g., here)
• Every time these blur (= unfocus) and selection events happen, we update the error notification but also automatically scroll to it.
• However, we ignore validation when the user hasn't attempted to submit, so no screen jumping occurs at first.

There is a preventAutoScroll attribute ... but it can't possibly be being used effectively given that it is always false.

[Mwindo]

In light of conversation with UX, this ticket has evolved into something like, "Across our forms, get the ErrorNotification errors to update live (along with the inline validation errors) and prevent jumping behavior except on submit."

[Mwindo]

As I am going through to update forms, I am seeing and fixing a lot of inconsistencies/bugs:

1. Many forms don't live validate properly, either because they are missing live validation (e.g., Status Report Order) or because the validation is misconfigured/not fully configured (e.g., editing some contact information)
2. Some forms allow a 400 rather than validating (on petitions payment information, blank values can trigger this)

[Mwindo]

I will push to an experimental branch as soon as one is free so we can compare new behavior with existing behavior on test.

[Mwindo]

In the meantime, I will also post a couple of weird behaviors that I discovered (but did not fix), in case we want to address them at some point:

1. When a docket clerk edits a docket record, there can be a mismatch between the validation message and the displayed fields

Private Zenhub Video

2. In general, validation in the modal can interfere with validation in the background screen, and vice-versa. Here is what occurs in the following video:

• We try to submit a new Trial Session, which says, "Nope--show the validation errors!"
• When we open the modal, that statement is left over and now applies to the modal, too, and so validation errors immediately display on the modal form.
• We correct the validation errors in the modal, which says, "Great--no more validation errors! Clear 'em!" This clears the unrelated validation errors displayed in the background on the Add Trial Session form, too.

Private Zenhub Video

[Mwindo]

Another quirk: the docket clerk can deselect a trial location for a docket entry. Is this a bug, or should it be allowed?

Private Zenhub Video

[mwestereng1]

UX notes have been added to this 10074 validation error bug doc