This demo shows various use cases related to the submit blocking function.
Description: A simple form with a submit button and no additional listeners.
Expected Behavior: Endereco intercepts the event, validates the data, and restores the event. The normal browser submit flow continues.
Potential Issues: None expected (baseline test).
Description: Submit is triggered by pressing the Enter key in an input field.
Expected Behavior: Endereco intercepts the keydown event, validates it, and continues.
Potential Issues: KeyboardEvent handling differs from MouseEvent handling.
Description: An additional click listener on the submit button adds a loading class and blocks further clicks for 3 seconds.
Expected Behavior: When Endereco intercepts the click, the other listener should NOT execute – no loading class should be set. After validation, Endereco restores the event so that other handlers (including the loading logic) can continue working with the corrected data.
Potential Issues: Currently, Endereco uses stopPropagation() instead of stopImmediatePropagation(), which means other listeners on the same element are still executed.
Description: The submit button does not trigger a native form submission, but rather an AJAX request (simulated by the alert "Form submitted via Custom AJAX").
Expected behavior: Endereco intercepts the event, validates the data, and restores the event. The AJAX handler can then execute its work with the corrected data.
Potential issues: The AJAX handler may not execute correctly after resuming the form.
Description: The submit button is located outside the `form` tag and references the form via the `form` attribute.
Expected Behavior: Endereco detects the association via the `form` attribute, intercepts the event, validates it, and restores the event.
Potential Issues: `closest('form')` does not find the form; the button is not recognized as a submit button.
Description: A form with multiple submit buttons (e.g., "Save" and "Save & Continue").
Expected Behavior: The clicked button is correctly identified, and the resume function is triggered by the same button.
Potential Issues: The resume function might dispatch to the wrong button or be triggered multiple times.
Description: Other code disables the submit button during Endereco validation.
Expected Behavior: Endereco restores the event to the original button. The button should be enabled again at this point so that the event can be processed.
Potential Issues: The disabled button cannot receive events; Resume fails. Endereco has no control over when external code re-enables the button.
Description: Another listener on the submit button calls `stopImmediatePropagation()` before Endereco.
Expected behavior: Endereco still intercepts the event, validates it, and restores it. Other listeners cannot bypass Endereco.
Potential issues: Currently, Endereco is blocked if another listener calls `stopImmediatePropagation()`.
Description: A listener is registered in the capture phase (addEventListener('click', handler, true)).
Expected Behavior: The capture listener runs before bubble listeners. Endereco should still be able to intercept, validate, and recover the event.
Potential Issues: If the capture listener calls stopPropagation(), the event never reaches the bubble phase, and Endereco cannot intervene.
Description: The form is dynamically inserted into the DOM via JavaScript (simulating SPA navigation).
Expected behavior: Endereco recognizes the new form, registers listeners, and can intercept, validate, and recover events as usual.
Potential issues: Listeners are not registered for dynamically added elements.
Description: User quickly clicks the submit button twice.
Expected behavior: Endereco intercepts the first click and blocks further events until validation is complete. Only one event cycle (intercept → validate → restore) is executed.
Potential issues: Double validation, double resume, or a race condition if the second click occurs during validation.