Roundup Tracker - Issues

Issue 2551377

classification
Disabled submit button UI issues
Type: behavior Severity: normal
Components: Web interface Versions:
process
Status: new
:
: : rouilj, schlatterbeck
Priority: normal : Effort-Low

Created on 2024-12-09 15:33 by rouilj, last changed 2025-01-01 22:48 by rouilj.

Messages
msg8222 Author: [hidden] (rouilj) Date: 2024-12-09 15:33
While investigating issue 251376, I managed to hang a form with client side validation.

I created a new issue in my tracker with a bogus value for an issue multi-link.
The title was set to required, but was empty.

I clicked on the submit button and it was disabled as expected.
However, the form validation flagged the title as required.
I then entered a title, but the submit button was still stuck as disabled.

Refreshing the form cleared the disabled button, but was a pain and could lose info
(like an uploaded file).

Adding a routine to re-enable the submit button is needed.
The code that disables the submit button can add a setTimeout call to re-enable
the button after 1 or two seconds. This should be enough time to reload/refresh
the page.

If the page is not refreshed, re-enable the submit button so the form can be 
submitted again on the theory that something went wrong with the submission and
the user needs to try again.

If the page refresh happens before the timeout, the routine is destroyed and never runs.
Two seconds sounds about right for the submit to complete and start the reload.
If there is an error displayed by validation, the user will probably take more than
two seconds to understand and fix the issue. So the form is ready to resubmit
by the time the fix is done.
msg8248 Author: [hidden] (rouilj) Date: 2025-01-01 22:48
This patch:

--- a/roundup/cgi/templating.py Wed Jan 01 09:54:32 2025 -0500
+++ b/roundup/cgi/templating.py Wed Jan 01 17:35:03 2025 -0500
@@ -3407,6 +3407,9 @@
         alert("Your request is being processed.\\nPlease be patient.");
         return false;
     }
+
+    /* reset after 5 seconds */
+    window.setTimeout("submitted = false;", 5000);
     submitted = true;
     return true;
 }

will make the submit button work again after 5 seconds. I tested this in chrome and 
firefox with classic demo tracker (with 5000 replaced by 20000) using:

  open new issue
  submit empty issue
  get page with error message saying title required (2)
  use browser back button to go back to prior page (1)
    hit submit immediately you should see the please be patient message
  wait until 20 seconds has elapsed
  submit again and it should go through

(1) gets restored from the back/forward page cache and seems to also restore the
setTimeout. I am not sure if the time you were on page (2) is counted.
Per: https://web.dev/articles/bfcache#how-bfcache-works, the time on another page
is not counted.

For testing I ramped the 5000 to 20000 (20 seconds) to make it easier to
see the "patient" message.

So this might be a workaround. Exact timing delay, or making it settable TBD.
History
Date User Action Args
2025-01-01 22:48:48rouiljsetnosy: + schlatterbeck
messages: + msg8248
2025-01-01 21:46:25rouiljsetkeywords: + Effort-Low
priority: normal
2024-12-09 15:33:07rouiljcreate