patterntypescriptreactModerate
Double click on a "Next" button that is swapped for a submit button at the same spot submits the form
Viewed 0 times
double clickevent.detailmulti-step formsubmit buttonwizardpreventDefault
browser
Problem
In a multi-step form, a "Next" button (type=button) is replaced on click, at the exact same position, by a "Save" submit button. A user's habitual double click lands the second click on the new submit button. If the form is already valid (prefilled name from a clone, etc.), the form submits and skips the intermediate step. Giving each button its own React key does not help: the new element is simply under the pointer.
Solution
On the submit button that appears in place of the step button, ignore the second click of a double click: onClick={(e) => { if (e.detail > 1) e.preventDefault(); }}. preventDefault on the click cancels the button's activation behaviour (form submission). A keyboard activation has detail 0 and a deliberate single click has detail 1, so both still submit. Test it without a browser by calling onClick with { detail: 2, preventDefault: vi.fn() }. In a real browser, reproduce it through CDP with two mousePressed/mouseReleased pairs at the same point, the second one with clickCount: 2.
Why
The browser keeps counting clicks by time and position, not by element, so the second click still reports detail = 2 even though it lands on a newly rendered element.
Gotchas
- A different key per button does not stop it: the new button sits under the pointer
- Also guard against a sticky header in a scroll container hiding focused elements: set scroll-padding-top from a CSS variable that a ResizeObserver keeps equal to the header height
Code Snippets
Submit button that appears where the step button was
<button type="submit" onClick={(e) => { if (e.detail > 1) e.preventDefault(); }}>Save</button>Context
Step-by-step forms where the step button and the submit button share the same spot
Revisions (0)
No revisions yet.