React Form being submitted at the wrong time

I have two buttons, one of type "button" and one of type "submit", both wrapped in a form and which toggle each other. Weirdly, if I click on the button of type "button" the form is submitted and if I click of the button of type "submit" the form is not submitted.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

function App() {
  const [clicked, setClicked] = React.useState(false);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        console.log("form submitted!");
      }}
    >
      {!clicked ? (
        <button type="button" onClick={() => setClicked(true)}>
          Button 1
        </button>
      ) : (
        <button type="submit" onClick={() => setClicked(false)}>
          Button 2
        </button>
      )}
    </form>
  );
}

root.render(
  <App />
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

<!-- end snippet -->

I would expect that the opposite be true in regards to submitting the form.

Try this code, set manually the initial value of the showSubmitButton state to either true or false and you'll see that so far so good, the onSubmit event is looking for an input of type submit to fire and all works fine.<br>
you can also notice that the component rerenders before the onSubmit event handler runs.

import { useState } from "react";

const App = () => {
  const [counter, setCounter] = useState(0);
  const [showSubmitButton, setShowSubmitButton] = useState(true);

  return (
    <>
      {console.log("component rerender and counter is: ", counter)}
      <form
        onSubmit={(e) => {
          console.log(e);
          e.preventDefault();
          console.log("form submitted!");
        }}
      >
        {showSubmitButton ? (
          <button
            type="submit"
            onClick={(e) => {
              console.log("submit button clicked");
              setCounter((prev) => prev + 1);
              // setShowSubmitButton((prev) => !prev);
            }}
          >
            Submit
          </button>
        ) : (
          <button
            type="button"
            onClick={() => {
              console.log("simple button clicked");
              setCounter((prev) => prev + 1);
              // setShowSubmitButton((prev) => !prev);
            }}
          >
            Button
          </button>
        )}
      </form>
    </>
  );
};
export default App

the drama begins when you uncomment setShowSubmitButton((prev) => !prev) in the submit button.<br>
now when you click it and toggle showSubmitButton, the component rerenders it is like the onSubmit event is triggered but cannot fire because the component rerenders and the input of type submit which is mandatory to do so cannot be found so nothing happens, till now, neither one of the two buttons is triggering onSubmit.<br>

now uncomment setShowSubmitButton((prev) => !prev) in the simple button.<br> you'll see when you click that button the onSubmit event is firing and if you check e.target from inside onSubmit you will find it equal to

<form>
  <button type="submit">Submit</button>
</form>

so when you click the submit button, it seems like the onSubmit event is stuck because the input of type submit cannot be found therefore when you click the simple button, the input of type submit is back to DOM, so the event handler can finally find it and run.<br>
I know this is crazy, but it is the only explanation, there is no way that the simple button is triggering onSubmit.

if you move state updates inside the event handler after e.preventDefault():

 <>
      {console.log("component rerender and counter is: ", counter)}
      <form
        onSubmit={(e) => {
          console.log(e);
          e.preventDefault();
          console.log("form submitted!");
          setCounter((prev) => prev + 1);
          setShowSubmitButton((prev) => !prev);
        }}
      >
        {showSubmitButton ? (
          <button
            type="submit"
            onClick={(e) => {
              console.log("submit button clicked");
            }}
          >
            Submit
          </button>
        ) : (
          <button
            type="button"
            onClick={() => {
              console.log("simple button clicked");
            }}
          >
            Button
          </button>
        )}
      </form>
    </>
  );

you will see it working as expected! because the component will rerender only when the code inside the onSubmit event handler function finishes

Through some testing I can guess this is because events that are triggered before the buttons swap are executing after the buttons swap. I can reproduce this by just making a submit button disappear and reappear after clicking.

<!-- begin snippet: js hide: true console: true babel: true -->

<!-- language: lang-js -->

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
function RegularForm() {
return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log('form submitted!');
}}
>
<p>Regular</p>
<button type="submit">Type "submit"</button>
</form>
);
}
function BuggedForm() {
const [show, setShow] = React.useState(true);
const onClick = () => {
setShow(false);
setTimeout(() => setShow(true));
};
return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log('form submitted!');
}}
>
<p>Bugged</p>
{show && (
<button type="submit" onClick={onClick}>
Type "submit"
</button>
)}
</form>
);
}
root.render(
<div>
<RegularForm />
<BuggedForm />
</div>
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

<!-- end snippet -->

As you can see, if the button disappears right after clicking, the form does not submit. The event probably tried to execute when the button was not present in the DOM, and nothing happened.

As for why the 'button' type submits the form, it's probably because the button type gets updated to 'submit' before the event executes. If you change both types to 'button' the form does not submit.

<!-- begin snippet: js hide: true console: true babel: true -->

<!-- language: lang-js -->

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
function App() {
const [clicked, setClicked] = React.useState(false);
return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log('form submitted!');
}}
>
{!clicked ? (
<button type="button" onClick={() => setClicked(true)}>
Button 1
</button>
) : (
<button type="button" onClick={() => setClicked(false)}>
Button 2
</button>
)}
</form>
);
}
root.render(
<App />
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

<!-- end snippet -->

Hard to say whether this is a bug, or just jank that comes with the virtual DOM.

As for a solution, you can use a zero delay timeout to push the state change to the back of the queue. ie. after the events run their course.

<!-- begin snippet: js hide: true console: true babel: true -->

<!-- language: lang-js -->

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
function App() {
const [clicked, setClicked] = React.useState(false);
const toggleClicked = () => setClicked((prev) => !prev);
// React Jank: Let form events finish before toggling
const onClick = () => setTimeout(toggleClicked);
return (
<form
onSubmit={(e) => {
e.preventDefault();
console.log('form submitted!');
}}
>
{!clicked ? (
<button type="button" onClick={onClick}>
Type 'button'
</button>
) : (
<button type="submit" onClick={onClick}>
Type 'submit'
</button>
)}
</form>
);
}
root.render(
<App />
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>

<!-- end snippet -->

More info on zero delays: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop#zero_delays

I can't fully explain what's happening here, but it seems like--and I don't say this lightly--it might be a bug in React.

A few observations:

1. If you log event.nativeEvent.submitter within the onSubmit handler you'll see Button 2 submitted the form despite having clicked Button 1.

2. If you change Button 2 to <input type="submit" value="Button 2" /> it behaves as you would expect.

3. If you preventDefault in Button 1's click handler, neither button submits the form.

4. If you wrap the setClicked calls in a setTimeout it behaves as you'd expect. (See sample code below.)

Not sure what's going on here but it seems like there's a timing problem between the re-render from the state update and the dispatching and propagation of the click event. (My spidey-sense is telling me that someone smarter than me is going to come along with a much simpler explanation and I'm going to feel dumb for having suggested it's a bug in React.)

This feels like a bit of a hack, but if you're in a big hurry wrapping the state update in a setTimeout fixes it:

{!clicked ? (
  <button
    type="button"
    onClick={() => {
      setTimeout(() => setClicked(true), 1);
    }}
  >
    Button 1
  </button>
) : (
  <button
    type="submit"
    onClick={(e) => {
      setTimeout(() => setClicked(false), 1);
    }}
  >
    Button 2
  </button>
)}

There are multiple things to point out here. Let me try and explain.

1. First point is already explained by Ray, about the re-render issue. The component is rendered before the submit event is handled for the "submit". Generated Code for the above statement - here
2. Second and probably main point is that, in react form, click event of the first button is captured by the second button because react thinks that they are the same button. This can be avoided by adding the key property with each button to distinguish them and to stop capturing the click event for other button. So, if you don't change states in onclick method for the second button, you will see that, if you click any button inside a form, it will get submitted. Generated code for this statement - here
3. To get rid of this, just add key property for each button, so that react doesn't get confused in handling event for the respective button. Generated code for this statement - here

The last link is probably going to clear all of your issues.
Let me know if there is any issue or something I failed to explain.

Sorry for the bad explanation, I guess.

If you remove the conditional operator, it is working as expected - the type="submit" actually submits the form. This suggests that the type of button updated before event bubbling. This might be a bug.