React: Form submitted on `button[type=button]` click

[fbarrailla]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

Strange behavior : a form is submitted when I click a button[type=button]

The following sequence induce this behavior

• click on button[type="button"]
• call setState()
• button is transformed into a button[type=submit]
• the form submission handler is called 🤔

What is the expected behavior?

A button[type=button] is not expected trigger form submit.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I reproduced with react@__0.14.8__ and __15.4.0__ with Google Chrome v54 and Firefox v50 (see this fiddle)

_This behavior does not happen if I add an unique key property to both my buttons_

[aweary]

Thanks for the report @fbarrailla, I was able to reproduce the issue with the latest release as well. As you mentioned, using a unique key for each button solves this issue. This is because it forces React to not reuse the existing element.

The event handler is supposed te be removed by _updateDOMProperties, so I'll to look into why that isn't happening correctly.

[Imundy]

I was taking at look and this, and _updateDOMProperties explicitly does nothing for the old event handler.

else if (registrationNameModules.hasOwnProperty(propKey)) {
        // Do nothing for event names.
      } else if (isCustomComponent(this._tag, lastProps)) {

I'm not that familiar with the codebase yet, but I'm not sure how we prevent the event from bubbling? Like @aweary said, reusing the dom node causes the submit event to be fired - I can get the keyed example to do that if I just prevent the node from unmounting. I would love to keep looking into this if anyone could help point me in the right direction.

[maciej-ka]

This may not be a bug because a plain javascript version of example also submits the form. Button type has no importance before onClick is resolved.

It's possible to prevent form submit by explicit event.preventDefault(). Note that you cannot do it by using event.stopPropagation() like in @fbarrailla example.

If we decide that this really is a bug, I would propose such a fix:
1) detect a situation where button changes its type to submit in onClick
2) introduce "events to be ignored" where you could tell that next submit of target form should have no effect

But my suggestion is to stay with current version.

[nhunzaker]

I'm with @maciej-ka, particularly if this is the plain javascript behavior.

@aweary I vote to close this out with the recommended approach. What do you think?

[aweary]

Sounds good to me 👍

[dustykeyboard]

For future react archeologists, React is correctly passing the submit button as the clicked element.
To let React know they are different buttons, add a key prop on the button and change it when changing the type.

<button key={type} type={type} onClick={clickHandler}>Button</button>

[CameronHudson8]

I had a collision when I made key the same thing as type.
This worked:

import uuid from 'uuid';
<button key={uuid()} type={type} onClick={clickHandler}>Button</button>

[sercanl]

Thank you @CameronHudson8! That helped me here :)
https://storksnestblog.wordpress.com/2019/04/22/using-cloud-firestore-with-react/