Bug on form submit handling?
Answered
Yellowstripe scad posted this in #help-forum
Yellowstripe scadOP
I have two types of button, a regular button and a form submit button. If I click the "Next" button, the "submit" button also triggers. Only reproducible if the second button is a submit button. Here's the simplified code to reproduce the issue.
"use client"
import { useState } from "react";
const Home = () => {
const [step, setStep] = useState(0);
function submitFunc(e) {
e.preventDefault();
console.log("submit called");
}
function nextFunc() {
console.log("next called");
setStep(step + 1);
}
return (
<form onSubmit={submitFunc}>
<p>Step: {step}</p>
{step === 1 ? (
<button type="submit">Submit</button>
) : (
<button onClick={nextFunc}>Next</button>
)}
</form>
);
};
export default Home;13 Replies
@joulev you need `type="button"` on the button for it to not trigger when you submit the form
Yellowstripe scadOP
tried that, still got the same issue
American black bear
@Yellowstripe scad are you sure you have added it to the other button?
return (
<form onSubmit={submitFunc}>
<p>Step: {step}</p>
{step === 1 ? (
<button type="submit">Submit</button>
) : (
{ /* here */ }
<button type="button" onClick={nextFunc}>Next</button>
)}
</form>
);type="button" in the second button doesn't work, i'm trying it out. the bug is pretty funny@Yellowstripe scad tried that, still got the same issue
"use client"
import { useState } from "react";
const Home = () => {
const [step, setStep] = useState(0);
function submitFunc(e) {
e.preventDefault();
console.log("submit called");
}
function nextFunc() {
console.log("next called");
setStep(step + 1);
}
return (
<form onSubmit={submitFunc}>
<p>Step: {step}</p>
{/* {step === 1 ? ( */}
<button type="submit">Submit</button>
{/* ) : ( */}
<button onClick={nextFunc} type="button">Next</button>
{/* )} */}
</form>
);
};
export default Home;this works.
i suspect that when you swap the Next button with the Submit button, something either in react or the browser make the
onClick trigger not only for the outgoing button, but for the incoming button as well. this looks like a bug indeedAmerican black bear
I think I had a bug like this before
American black bear
maybe adding a key?
Answer
@joulev tsx
"use client"
import { useState } from "react";
const Home = () => {
const [step, setStep] = useState(0);
function submitFunc(e) {
e.preventDefault();
console.log("submit called");
}
function nextFunc() {
console.log("next called");
setStep(step + 1);
}
return (
<form onSubmit={submitFunc}>
<p>Step: {step}</p>
{/* {step === 1 ? ( */}
<button type="submit">Submit</button>
{/* ) : ( */}
<button onClick={nextFunc} type="button">Next</button>
{/* )} */}
</form>
);
};
export default Home;
this works.
i suspect that when you swap the Next button with the Submit button, something either in react or the browser make the `onClick` trigger not only for the outgoing button, but for the incoming button as well. this looks like a bug indeed
Yellowstripe scadOP
The logic is different from mine, I was trying to do stepper kind of thing. I ended up using two different conditions instead
{step === 1 && [button 1 here]} and {step !== 1 && [button 2 here]}@American black bear maybe adding a key?
Yellowstripe scadOP
Whoa, key works! But I believe nextjs (or react) should handle these stuff right?
American black bear
I think I had exact same issue a couple of months back when building a multi step form component. And in my case I think it was only happening on Firefox.
@Yellowstripe scad Whoa, key works! But I believe nextjs (or react) should handle these stuff right?
American black bear
This is a bug 100%, probably with react itself
Yellowstripe scadOP
yep, tested on plain react
probably gonna report this on gh